:root{
  --night:#1B1F3B; --night-2:#272C52; --ink:#1A1C2E; --muted:#636781;
  --paper:#F5F6FA; --card:#FFFFFF; --line:#DCDEE8;
  --marigold:#F2A007; --marigold-ink:#3A2600; --sindoor:#C8102E; --leaf:#1E7A4C;
  --r:6px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:"Mukta","Segoe UI",Roboto,Arial,sans-serif;font-size:16px;line-height:1.45;
  color:var(--ink);background:var(--paper)}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--marigold);outline-offset:1px}

/* layout: sidebar + main */
.shell{display:flex;min-height:100%}
.side{width:260px;flex:none;background:#EEF0F5;border-right:1px solid var(--line);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;transition:width .18s}
.side-top{display:flex;align-items:center;gap:8px;padding:18px 12px 20px 18px}
.brand{flex:1;min-width:0;display:block}
.brand img{display:block}
.brand-full{width:100%;max-width:190px;height:auto}
.brand-mini{width:36px;height:36px;display:none!important}
.menu-btn{flex:none;border:0;background:#FBE3E6;color:var(--sindoor);width:36px;height:36px;border-radius:8px;
  display:grid;place-items:center;cursor:pointer}
.menu-btn:hover{background:#F7CDD3}
.ico{width:21px;height:21px;flex:none}
.side-nav{display:flex;flex-direction:column;gap:2px;padding:0 10px}
.side-nav a,.side-logout{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:8px;text-decoration:none;
  color:#2D3150;font-weight:600;white-space:nowrap}
.side-nav a:hover,.side-logout:hover{background:#E1E4EE}
.side-nav a.on{background:var(--night);color:#fff}
.side-nav a.on .ico{color:var(--marigold)}
.side-logout{margin:auto 10px 14px;color:var(--muted)}
.side-logout:hover{color:var(--sindoor)}
.side-shade{display:none}
.main{flex:1;min-width:0;display:flex;flex-direction:column;--side-w:260px}
/* faint shop logo in the middle of the page area (stays still while scrolling) */
.main::before{content:"";position:fixed;left:var(--side-w);right:0;top:64px;bottom:0;pointer-events:none;z-index:0;
  background:url("logo/logo-horizontal.png") no-repeat center bottom 48px/min(520px,50%);opacity:.07}
.top{display:flex;align-items:center;gap:12px;height:64px;padding:0 24px;background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:30}
.top-title{font-size:20px;font-weight:700;margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who{display:flex;align-items:center;gap:8px;color:var(--ink)}
.who .ico{width:30px;height:30px;color:var(--night)}
.who-name{font-weight:700;line-height:1.1}
.who-role{font-size:13px;color:var(--muted);line-height:1.1}
.mobile-only{display:none}
.wrap{width:100%;max-width:1320px;margin:0 auto;padding:20px 24px;position:relative;z-index:1}

/* collapsed sidebar: icons only */
.side-mini .side{width:72px}
.side-mini .main{--side-w:72px}
.side-mini .side-top{flex-direction:column;padding:14px 0 16px}
.side-mini .brand{flex:none}
.side-mini .brand-full{display:none}
.side-mini .brand-mini{display:block!important}
.side-mini .side-nav a,.side-mini .side-logout{justify-content:center;padding:11px 0}
.side-mini .side-nav a span,.side-mini .side-logout span{display:none}

/* inputs & buttons */
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:14px;color:var(--muted)}
input[type=text],input[type=search],input[type=number],input[type=tel],input[type=password],input[type=date],select{
  border:1px solid var(--line);background:#fff;border-radius:var(--r);padding:8px 10px;min-width:0}
input:focus,select:focus{border-color:var(--night);outline:none;box-shadow:0 0 0 3px #1B1F3B22}
.btn{display:inline-block;text-decoration:none;border:1px solid var(--line);background:#fff;border-radius:var(--r);padding:8px 16px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--night)}
.btn.primary{background:var(--marigold);border-color:var(--marigold);color:var(--marigold-ink);font-weight:700}
.btn.primary:hover{background:#E09400}
.btn.danger{color:var(--sindoor)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:20px;line-height:1;padding:4px 8px;border-radius:var(--r)}
.x:hover{color:var(--sindoor);background:#C8102E12}
kbd{font-family:inherit;font-size:12px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:#fff;color:var(--muted)}

/* billing layout */
.billing{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.entry{display:grid;grid-template-columns:minmax(0,1fr) 90px 110px 130px auto;gap:10px;align-items:end;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.entry .search{position:relative}
.entry #amt{font-weight:700}
.entry #q{font-size:19px;padding:10px 12px}
.hint{font-size:13px;color:var(--muted);margin:6px 2px 0}
.results{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:0 10px 30px #1B1F3B26;max-height:380px;overflow:auto;z-index:20;display:none}
.results.open{display:block}
.res{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:8px 12px;cursor:pointer;border-bottom:1px solid #EEF0F5}
.res:last-child{border-bottom:0}
.res .n{font-weight:600}
.res .m{font-size:13px;color:var(--muted);grid-column:1}
.res .p{grid-row:1/3;grid-column:2;align-self:center}
.res .p.zero{color:var(--sindoor);font-size:13px}
.res.act{background:#FFF4DA}
.empty-res{padding:12px;color:var(--muted)}

table.grid{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
table.grid th{font-weight:600;font-size:14px;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);background:#FAFBFD}
table.grid td{padding:6px 10px;border-bottom:1px solid #EEF0F5;vertical-align:middle}
table.grid tr:last-child td{border-bottom:0}
table.grid th.num{text-align:right}
.cart-wrap{margin-top:14px}
.cart input{width:84px;text-align:right;padding:5px 8px}
.cart .sub{font-size:13px;color:var(--muted)}
.cart-empty{padding:40px 10px;text-align:center;color:var(--muted)}

/* the total panel - the one bold element */
.panel{position:sticky;top:84px;background:var(--night);color:#fff;border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:12px}
.panel .field label{color:#B9BDDA}
.req{color:var(--marigold);font-weight:700}
.panel input,.panel select{background:var(--night-2);border-color:#3A4070;color:#fff}
.panel input::placeholder{color:#8A8FB5}
.panel .row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.field select{width:100%}
.scroll{overflow-x:auto;max-width:100%}
.sums{border-top:1px solid #3A4070;padding-top:10px;display:grid;grid-template-columns:1fr auto;gap:4px 10px;color:#C9CCE4}
.grand{display:flex;flex-direction:column;align-items:flex-end;padding:6px 0 2px}
.grand .lbl{color:#B9BDDA;font-size:14px}
.grand .amt{font-size:46px;font-weight:700;line-height:1.05;color:var(--marigold);font-variant-numeric:tabular-nums}
.panel .btn.primary{font-size:18px;padding:12px}
.err{background:#C8102E;color:#fff;border-radius:var(--r);padding:8px 10px;font-size:14px;display:none}
.err.show{display:block}

/* bills & items pages */
.head{display:flex;align-items:end;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.head h1{font-size:24px;margin:0 auto 0 0}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;min-width:150px}
.stat .k{font-size:13px;color:var(--muted)}
.stat .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.stat.big{background:var(--night);color:#fff;border-color:var(--night)}
.stat.big .k{color:#B9BDDA}.stat.big .v{color:var(--marigold)}
tr.cancelled td{color:var(--muted);text-decoration:line-through}
tr.cancelled td.keep{text-decoration:none}
.tag{font-size:12px;border-radius:4px;padding:1px 6px;background:#EEF0F5;color:var(--muted)}
.tag.red{background:#C8102E18;color:var(--sindoor)}
.tag.disc{background:#F2A00726;color:var(--marigold-ink);font-weight:600}
.items input.cell{width:100%;border-color:transparent;background:transparent;padding:4px 6px}
.items input.cell:hover{border-color:var(--line)}
.items input.cell:focus{background:#fff;border-color:var(--night)}
.items input.price{width:100px;text-align:right}
.items input.price.zero{background:#FFF2CC;border-color:#F2D27A}
.items tr.saved td{background:#E6F4EC;transition:background .6s}
.items tr.off td{opacity:.5}
.cat-row td{background:#FAFBFD;font-weight:600;color:var(--muted);font-size:14px}
.addform{display:grid;grid-template-columns:2fr 1fr 1fr 80px 100px 100px auto;gap:8px;align-items:end;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:16px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:8px 16px;border-radius:var(--r);display:none;z-index:50}
.toast.show{display:block}

/* login */
.login{min-height:100%;display:grid;place-items:center;background:var(--night);padding:20px}
.login form{background:#fff;border-radius:var(--r);padding:28px;width:100%;max-width:340px;display:flex;flex-direction:column;gap:14px}
.login form{max-width:360px;border-top:4px solid var(--marigold);position:relative;z-index:1;
  box-shadow:0 20px 60px #0008;animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.login-logo{display:block;width:240px;max-width:100%;height:auto;margin:4px auto 6px;animation:pop .7s .25s cubic-bezier(.3,1.5,.5,1) both}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.login form,.login-logo{animation:none}}
.login p{margin:0;color:var(--muted);text-align:center}

@media (max-width:900px){
  .wrap{padding:12px}
  /* phone / small tablet: sidebar slides in over the page */
  .main,.side-mini .main{--side-w:0px}
  .main::before{top:56px}
  .side,.side-mini .side{position:fixed;left:0;top:0;bottom:0;z-index:60;width:248px;transform:translateX(-100%);
    transition:transform .2s;box-shadow:0 0 40px #1B1F3B40}
  .side-open .side{transform:none}
  .side-open .side-shade{display:block;position:fixed;inset:0;background:#1B1F3B66;z-index:55}
  .side-mini .side-top{flex-direction:row;padding:16px 12px 18px 16px}
  .side-mini .brand{flex:1}
  .side-mini .brand-full{display:block}
  .side-mini .brand-mini{display:none!important}
  .side-mini .side-nav a,.side-mini .side-logout{justify-content:flex-start;padding:10px 14px}
  .side-mini .side-nav a span,.side-mini .side-logout span{display:inline}
  .mobile-only{display:grid}
  .top{height:56px;padding:0 12px}
  .top-title{font-size:18px}
  .billing{grid-template-columns:minmax(0,1fr)}
  .hint{display:none}
  .panel{position:static}
  .entry{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .entry .search{grid-column:1/-1}
  .addform{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* v2: stock, read-only rate, users */
.stk{color:var(--leaf)}
.stk.out{color:var(--sindoor);font-weight:600}
input[readonly]{background:#F0F1F6;color:var(--ink);cursor:default}
.items input.stock{width:90px;text-align:right}
.items input.stock.zero{background:#EEF0F5}
.bal-low{color:var(--sindoor);font-weight:600}
.users-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px}
.card h2{font-size:18px;margin:0}
@media (max-width:900px){.users-grid{grid-template-columns:minmax(0,1fr)}}

@media (max-width:560px){.who-role{display:none}.who .ico{width:26px;height:26px}}

/* discount amount next to Discount % on the billing panel */
.panel input.disc-amt{background:transparent;border-color:#3A4070;color:var(--marigold);font-weight:700;cursor:default}

/* fireworks behind the app pages (same area as the watermark, under the content) */
.fx-bg{position:fixed;left:var(--side-w);right:0;top:64px;bottom:0;width:calc(100% - var(--side-w));height:calc(100% - 64px);
  pointer-events:none;z-index:0;opacity:.8}
.fx-toggle{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:#FFF8E6;color:var(--marigold-ink);
  border-radius:999px;padding:5px 12px 5px 9px;font-size:14px;font-weight:600;cursor:pointer;margin-right:8px}
.fx-toggle .ico{width:18px;height:18px;color:var(--marigold)}
.fx-toggle:hover{border-color:var(--marigold)}
.fx-toggle.off{background:#fff;color:var(--muted)}
.fx-toggle.off .ico{color:var(--muted)}
@media (max-width:900px){.fx-bg{top:56px;height:calc(100% - 56px)}.fx-toggle span{display:none}.fx-toggle{padding:6px}}

/* see-through bills list: the fireworks show behind it */
table.grid.glass{background:rgba(255,255,255,.45);border-color:rgba(220,222,232,.7)}
table.grid.glass th{background:rgba(250,251,253,.55)}
table.grid.glass td{border-bottom-color:rgba(220,222,232,.6)}
table.grid.glass .btn{background:rgba(255,255,255,.75)}

/* see-through summary boxes (Bills and Items pages) */
.stat{background:rgba(255,255,255,.45);border-color:rgba(220,222,232,.7)}
.stat.big{background:rgba(27,31,59,.82);border-color:rgba(27,31,59,.82)}
/* items list: keep the "set price" / "no stock" hints visible but see-through */
table.grid.glass.items input.price.zero{background:rgba(255,242,204,.7)}
table.grid.glass.items input.stock.zero{background:rgba(238,240,245,.6)}

/* New bill cart as a ruled table (lines between every row and column) */
table.grid.boxed{border-collapse:collapse}
table.grid.boxed th,table.grid.boxed td{border:1px solid rgba(160,165,190,.55)}
table.grid.boxed thead th{background:rgba(27,31,59,.88);color:#fff;font-weight:600}
table.grid.boxed tfoot td{font-weight:700;background:rgba(255,244,218,.75)}
table.grid.boxed tbody tr:nth-child(even) td{background:rgba(238,240,245,.35)}
/* keep the green "saved" flash visible on shaded rows of ruled tables */
table.grid.boxed tbody tr.saved td{background:#E6F4EC}

/* see-through "Add a login" box on the Users page (its input boxes stay solid for typing) */
.card.glass-card{background:rgba(255,255,255,.45);border-color:rgba(220,222,232,.7)}

/* Dues page and credit tags */
.tag.due{background:#C8102E18;color:var(--sindoor);font-weight:600;text-decoration:none}
.tag.paid{background:#1E7A4C1A;color:var(--leaf);font-weight:600}
.stat.recv .v{color:var(--leaf)}
.recv-split{font-size:12px;color:var(--muted)}
table.dues .due-amt{font-weight:700;color:var(--sindoor)}
table.dues tr.cust-total td{font-weight:700;background:rgba(238,240,245,.7)}
table.dues tbody.cust{border-top:2px solid rgba(27,31,59,.35)}
.btn.sm{padding:5px 12px;font-size:14px}
.dlg{border:0;border-radius:10px;padding:20px;width:min(420px,92vw);box-shadow:0 20px 60px #1B1F3B55}
.dlg::backdrop{background:#1B1F3B80}
.dlg h2{margin:0 0 6px;font-size:20px}
.dlg form{display:flex;flex-direction:column;gap:12px}
.dlg-who{margin:0;color:var(--muted)}
.dlg-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
table.grid.glass .btn.primary{background:var(--marigold);border-color:var(--marigold)}

/* Stock in page */
.stockform{grid-template-columns:150px minmax(0,2fr) 110px minmax(0,1fr) minmax(0,1fr) auto}
.stockform .search{position:relative}
@media (max-width:900px){.stockform{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.stockform .search{grid-column:1/-1}}

/* cancel / restore history on the Bills list */
.why{font-size:12px;color:var(--sindoor);margin-top:2px;max-width:220px;white-space:normal}
.hist-tip{font-size:12px;color:var(--muted);text-decoration:underline dotted;cursor:help;margin-top:1px}
.tag.restored{background:#1E7A4C1A;color:var(--leaf)}

/* Reports page */
.period{font-size:16px;font-weight:600;color:var(--muted);margin-left:6px}
.range{display:flex;gap:8px;align-items:end;flex-wrap:wrap}
.presets{display:flex;gap:6px;flex-wrap:wrap;margin:-6px 0 14px}
.chip{border:1px solid var(--line);background:rgba(255,255,255,.7);border-radius:999px;padding:4px 12px;font-size:14px;text-decoration:none;color:var(--ink)}
.chip:hover{border-color:var(--night)}
.chip.on{background:var(--night);color:#fff;border-color:var(--night)}
.rep-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:20px;align-items:start}
.wrap section{margin-bottom:22px;position:relative}
.wrap section h2{font-size:19px;margin:0 0 8px}
.sub-h{font-size:13px;font-weight:400;color:var(--muted);margin-left:6px}
.bar-cell{height:12px;background:rgba(27,31,59,.07);border-radius:6px;overflow:hidden}
.bar-cell span{display:block;height:100%;background:var(--marigold);border-radius:6px}
@media (max-width:900px){.rep-grid{grid-template-columns:minmax(0,1fr)}}

/* Bills page search */
.bill-search{display:flex;gap:8px;align-items:end;margin-left:auto}
.bill-search input{width:260px}
@media (max-width:900px){.bill-search{margin-left:0;width:100%}.bill-search input{width:100%}}

/* Bills page pagination */
.pager{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;position:relative;z-index:1}
.pg-info{color:var(--muted);font-size:14px;margin-right:auto}
.pg-links{display:flex;gap:4px;flex-wrap:wrap}
.pg{min-width:36px;text-align:center;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r);
  background:rgba(255,255,255,.8);text-decoration:none;color:var(--ink);font-size:14px}
a.pg:hover{border-color:var(--night)}
.pg.on{background:var(--night);border-color:var(--night);color:#fff;font-weight:700}
.pg.off{opacity:.45}
.pg.gap{border-color:transparent;background:none}
.pg-per{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
.pg-per select{padding:5px 8px}
button.pg{cursor:pointer;font:inherit;font-size:14px}
button.pg:hover{border-color:var(--night)}

/* payment buttons on the billing panel (always visible, Credit highlighted when chosen) */
.panel .lbl{font-size:14px;color:#B9BDDA}
.paymodes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.pm{border:1px solid #3A4070;background:var(--night-2);color:#C9CCE4;border-radius:var(--r);padding:9px 4px;font:inherit;font-weight:600;cursor:pointer}
.pm:hover{border-color:#8A8FB5;color:#fff}
.pm.on{background:var(--marigold);border-color:var(--marigold);color:var(--marigold-ink)}
.pm.credit.on{background:var(--sindoor);border-color:var(--sindoor);color:#fff}
.credit-note{font-size:13px;color:#FFB3BE;margin-top:2px}
.credit-note b{color:#fff}

/* Price change page */
.priceform{grid-template-columns:auto auto 120px 140px minmax(0,1fr) auto}
.seg{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.seg button{border:0;background:none;padding:7px 14px;cursor:pointer;font-weight:600;color:var(--muted)}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--night);color:#fff}
#dir button.on[data-v=up]{background:var(--leaf)}
#dir button.on[data-v=down]{background:var(--sindoor)}
.df.up{color:var(--leaf);font-weight:600}
.df.down{color:var(--sindoor);font-weight:600}
#tb tr.dim td{opacity:.45}
.pc-items summary{cursor:pointer;color:var(--night);text-decoration:underline dotted}
.pc-items .mini{margin-top:6px;border-collapse:collapse;font-size:14px}
.pc-items .mini td{border:0!important;background:none!important;padding:2px 8px 2px 0}
table.grid tr.off td{opacity:.55}
@media (max-width:900px){.priceform{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}