/* JH Office — Neumorphism (soft UI) look. Sirf <html class="neu"> par lagta hai.
   Preview: office.jhgallery.in/?theme=neu   ·   wapas: ?theme=off
   Niyam: photo, SKU, ginti aur laal/hare status pehle jitne saaf rahein (godown staff). */
html.neu{
  --neu-bg:#F3EBE2;           /* kesariya-cream base (logo ke rang se) */
  --neu-hi:#FFFFFF;           /* upar-baayein roshni */
  --neu-lo:rgba(163,131,101,.38); /* neeche-daayein parchhai */
  --neu-out:6px 6px 14px var(--neu-lo),-6px -6px 14px var(--neu-hi);
  --neu-out-sm:3px 3px 7px var(--neu-lo),-3px -3px 7px var(--neu-hi);
  --neu-in:inset 4px 4px 9px var(--neu-lo),inset -4px -4px 9px var(--neu-hi);
  --neu-in-sm:inset 2px 2px 5px var(--neu-lo),inset -2px -2px 5px var(--neu-hi);
  --bg:var(--neu-bg); --surface:var(--neu-bg); --line:rgba(163,131,101,.18); --chip:var(--neu-bg);
}
html.neu body{background:var(--neu-bg)}

/* raised surfaces */
html.neu .panel,html.neu .tile,html.neu .card,html.neu .sheet,html.neu .pcard,html.neu .ocard,html.neu .rsrow,html.neu .rtrow,
html.neu .estbox,html.neu .selbar{border-color:transparent;box-shadow:var(--neu-out);background:var(--neu-bg)}
html.neu .panel,html.neu .tile{border-radius:18px}
html.neu .tile{border-top:0;position:relative;overflow:hidden}
html.neu .tile::before{content:"";position:absolute;left:14px;right:14px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--c,var(--aqua))}
html.neu .rail{background:var(--neu-bg);border-right:0;box-shadow:6px 0 16px -8px var(--neu-lo)}
html.neu .rail .who{border-top-color:var(--line)}

/* nav: chuna hua = andar daba hua */
html.neu .nav button{border-radius:14px}
html.neu .nav button:hover{background:transparent;box-shadow:var(--neu-out-sm);color:var(--ink)}
html.neu .nav button[aria-current="true"]{background:var(--neu-bg);box-shadow:var(--neu-in);color:var(--c,var(--ink))}

/* buttons: ubhre hue, dabane par andar */
html.neu .btn,html.neu .chipbtn,html.neu .subtabs button,html.neu .langbtn,html.neu .gbtn{border-color:transparent;background:var(--neu-bg);box-shadow:var(--neu-out-sm);transition:box-shadow .12s}
html.neu .btn:active,html.neu .chipbtn:active,html.neu .subtabs button:active,html.neu .gbtn:active{box-shadow:var(--neu-in-sm)}
html.neu .btn.primary{background:var(--c,var(--aqua));color:#fff;box-shadow:4px 4px 10px var(--neu-lo),-4px -4px 10px var(--neu-hi),inset 1px 1px 0 rgba(255,255,255,.25)}
html.neu .btn.primary:active{box-shadow:inset 3px 3px 7px rgba(0,0,0,.25)}
html.neu .subtabs button[aria-selected="true"],html.neu .chipbtn[aria-pressed="true"]{background:var(--aqua);color:#fff;box-shadow:var(--neu-in-sm),0 0 0 0 transparent}
html.neu .subtabs button{border-radius:999px}

/* inputs: andar dabe */
html.neu input:not([type=checkbox]):not([type=radio]):not([type=file]),html.neu select,html.neu textarea,html.neu .qin,html.neu .bigsearch{
  background:var(--neu-bg);border-color:transparent;box-shadow:var(--neu-in);border-radius:12px}
html.neu .scanbar input,html.neu .bigsearch{box-shadow:var(--neu-in),0 0 0 2px var(--aqua)}
html.neu .bigsearch{box-shadow:var(--neu-in),0 0 0 2px var(--saffron)}

/* status wale card: rang saaf rahe (laal = baaki, hara = ho gaya) */
html.neu .ocard{border:0;border-left:6px solid var(--bc,var(--line))}
html.neu .ocard.pending{background:#FBEDEA}
html.neu .ocard.packed{background:#E6F1E2;box-shadow:var(--neu-in-sm)}
html.neu .pcard.done{background:#E6F1E2;box-shadow:var(--neu-in-sm)}
html.neu .pcard.isnew{box-shadow:var(--neu-out),0 0 0 2px var(--saffron)}
html.neu .rsrow.st-ok,html.neu .rtrow.ok{background:#E6F1E2;box-shadow:var(--neu-in-sm)}
html.neu .rsrow.st-skip{box-shadow:var(--neu-out-sm),0 0 0 2px var(--bad-soft)}

/* photos: chhota ubhra frame */
html.neu .thumb,html.neu .pimg,html.neu .bigimg,html.neu .mini,html.neu .heroimg{border-color:transparent;box-shadow:var(--neu-out-sm);background:#fff}
html.neu .zbtn{box-shadow:0 2px 6px rgba(0,0,0,.3)}

/* table + rows */
html.neu th{border-bottom-color:var(--line)}
html.neu td{border-bottom-color:var(--line)}
html.neu .prow{border-top-color:var(--line)}
html.neu .overlay{background:rgba(60,40,25,.45)}
html.neu .shiftbar{background:var(--neu-bg);box-shadow:var(--neu-in-sm)}
html.neu .warnbox{box-shadow:var(--neu-in-sm)}

/* ---------- 2) MFN Aaj: progress ring + batch timeline ---------- */
.aajhero{display:none}
html.neu .aajhero{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
html.neu .ring{position:relative;width:132px;height:132px;flex:none;border-radius:50%;box-shadow:var(--neu-out);padding:10px}
html.neu .ring svg{width:100%;height:100%;transform:rotate(-90deg)}
html.neu .ring-bg{fill:none;stroke:var(--neu-bg);stroke-width:10;filter:drop-shadow(1px 1px 1px var(--neu-lo))}
html.neu .ring-fg{fill:none;stroke-width:10;stroke-linecap:round;transition:stroke-dasharray .8s ease}
html.neu .ring-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
html.neu .ring-txt b{font-size:24px}
html.neu .ring-txt small{font-size:11px;color:var(--muted)}
html.neu .tlines{flex:1;min-width:260px;display:flex;flex-direction:column;gap:10px}
html.neu .tlines h2{margin:0 0 4px}
html.neu .tline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 12px;border-radius:14px;box-shadow:var(--neu-in-sm)}
html.neu .tname{font-weight:600;font-size:13px;min-width:120px;color:var(--c)}
html.neu .tstep{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);position:relative;padding-right:14px}
html.neu .tstep:not(:last-child)::after{content:"";width:10px;height:2px;background:var(--line);position:absolute;right:0;top:50%}
html.neu .tstep i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;box-shadow:var(--neu-in-sm)}
html.neu .tstep.ok{color:var(--ink)}
html.neu .tstep.ok i{background:var(--ok);color:#fff;box-shadow:none}
html.neu .tstep.part i{background:var(--saffron);color:#fff;box-shadow:none}
html.neu .tstep small{color:var(--muted);font-size:11px}

/* ---------- 3a) Pack hote hi ✓ chamak ---------- */
@keyframes jhPop{0%{transform:scale(.96)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes jhTick{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
html.neu .ocard.justpacked{position:relative;animation:jhPop .5s ease}
html.neu .ocard.justpacked::after{content:"✓";position:absolute;left:50%;top:50%;width:64px;height:64px;border-radius:50%;background:var(--ok);color:#fff;font-size:36px;font-weight:700;display:grid;place-items:center;box-shadow:0 6px 18px rgba(46,125,50,.45);animation:jhTick 1.4s ease forwards;pointer-events:none}

/* ---------- 3b) Skeleton loading ---------- */
.skel .skc{display:none}
html.neu .skel p{display:none}
html.neu .skel .skc{display:block;height:74px;border-radius:16px;margin:12px 0;box-shadow:var(--neu-out-sm);
  background:linear-gradient(100deg,var(--neu-bg) 30%,#FBF6F0 50%,var(--neu-bg) 70%) 0 0/300% 100%;animation:jhShine 1.3s linear infinite}
html.neu .skel .skc.short{width:60%}
@keyframes jhShine{to{background-position:-150% 0}}

/* ---------- 3c) Scan box upar chipka rahe ---------- */
html.neu .scanpanel{position:sticky;top:8px;z-index:20}

/* ---------- 3d) Tablet / phone: bade button ---------- */
@media (pointer:coarse){
  html.neu .btn,html.neu .chipbtn,html.neu .subtabs button{min-height:48px;padding-left:18px;padding-right:18px}
  html.neu .ocard{min-height:96px}
  html.neu .scanbar input{min-height:54px;font-size:18px}
  html.neu input[type=checkbox]{width:24px;height:24px}
}
@media (prefers-reduced-motion:reduce){html.neu .ocard.justpacked,html.neu .ocard.justpacked::after,html.neu .skel .skc{animation:none}}