:root{--bg:#f8fafc;--s1:#ffffff;--s2:#f8f9fc;--s3:#eef0f5;--bd:#e2e8f0;--acc:#1d4ed8;--grn:#16a34a;--blu:#2563eb;--pur:#7c3aed;--red:#dc2626;--yel:#d97706;--tx:#0f172a;--mu:#475569;--hdr-bg:#0f172a}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;font-size:13px;min-height:100vh;line-height:1.5}

/* ═══════════════════════════════════════════════════════════════════════
   HEADER - Simple single-row ERP Header with Date, Stats, Status
   ═══════════════════════════════════════════════════════════════════════ */
header{background:#1e293b;border-bottom:1px solid #334155;padding:0 20px;height:52px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:sticky;top:0;z-index:100}
header .hst{color:#94a3b8;justify-self:end}
header .hst b{color:#f1f5f9}
header .logo{color:#38bdf8;justify-self:start;font-family:Rajdhani,sans-serif;font-size:20px;font-weight:700}
header .logo span{color:#f1f5f9}
.header-current-date{justify-self:center;color:#e2e8f0;font-size:13px;letter-spacing:.2px;white-space:nowrap;text-align:center}
.header-current-date b{color:#fff;font-weight:800}
.header-last-work{margin-left:14px;padding-left:14px;border-left:1px solid #334155;color:#94a3b8;font-size:12px;white-space:nowrap}
.header-last-work b{color:#38bdf8;font-weight:700}
.hst{display:flex;gap:20px;align-items:center;font-size:12px;color:var(--mu)}
.hst b{color:#f1f5f9}
/* laptop/narrow screens: Last work date ke NEECHE aa jaata hai (width nahi badhti, stats squeeze nahi hote) */
@media (min-width:701px) and (max-width:1800px){.header-current-date{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.15}.header-last-work{margin:0;padding:0;border:0;font-size:11px}}
@media (max-width:900px){.header-current-date{font-size:11px}.hst{gap:8px}}
@media (max-width:700px){.header-current-date{display:none}}
/* ═══════════════════════════════════════════════════════════════════════
   NAVIGATION - Clean Professional Tabs
   ═══════════════════════════════════════════════════════════════════════ */
nav{background:#ffffff;border-bottom:1px solid var(--bd);padding:0 20px;display:flex;align-items:stretch;gap:0;overflow-x:auto;box-shadow:none;position:sticky;top:64px;z-index:99}
nav::-webkit-scrollbar{height:4px}
nav::-webkit-scrollbar-track{background:transparent}
nav::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}

/* ═══════════════════════════════════════════════════════════════════════
   ALERT BAR - Compact Warning Strip Below Header
   ═══════════════════════════════════════════════════════════════════════ */
.alert-bar{background:#fef3c7;border-bottom:1px solid #fcd34d;padding:10px 20px;display:flex;align-items:center;gap:12px;font-size:13px;color:#92400e}
.alert-bar .alert-icon{font-size:16px;flex-shrink:0}
.alert-bar .alert-text{flex:1}
.alert-bar .alert-text b{color:#78350f;font-weight:700}
.alert-bar .alert-dismiss{background:transparent;border:none;color:#92400e;cursor:pointer;font-size:18px;padding:0;line-height:1;opacity:0.7;transition:opacity .15s}
.alert-bar .alert-dismiss:hover{opacity:1}
.nav-admin-menu{position:relative;display:flex;align-items:stretch;flex:0 0 auto}
.nav-admin-toggle{display:flex;align-items:center;gap:5px;border-left:1px solid #cbd5e1;padding-left:14px;padding-right:14px}
.nav-caret{font-size:9px;transition:transform .15s}
.nav-admin-menu.open .nav-caret{transform:rotate(180deg)}
.nav-admin-dropdown{position:fixed;display:none;min-width:210px;max-height:70vh;overflow-y:auto;background:#fff;border:1px solid #cbd5e1;border-radius:0 0 8px 8px;box-shadow:0 10px 24px rgba(15,23,42,.16);padding:4px;z-index:10001}
.nav-admin-menu.open .nav-admin-dropdown{display:flex;flex-direction:column}
.nav-admin-dropdown .tab{width:100%;text-align:left;border:none;border-radius:5px;margin:0;padding:9px 11px}
.nav-admin-dropdown .tab:hover{background:#f1f5f9}

.nav-history-menu{position:relative;display:flex;align-items:stretch;flex:0 0 auto}
.nav-history-menu.open .nav-caret{transform:rotate(180deg)}
.nav-history-dropdown{position:fixed;display:none;min-width:190px;max-height:70vh;overflow-y:auto;background:#fff;border:1px solid #cbd5e1;border-radius:0 0 8px 8px;box-shadow:0 10px 24px rgba(15,23,42,.16);padding:4px;z-index:10001}
.nav-history-menu.open .nav-history-dropdown{display:flex;flex-direction:column}
.nav-history-dropdown .tab{width:100%;text-align:left;border:none;border-radius:5px;margin:0;padding:9px 11px}
.nav-history-dropdown .tab:hover{background:#f1f5f9}

/* ═══════════════════════════════════════════════════════════════════════
   TAB NAVIGATION - Professional Clean Tabs with Clear Active State
   ═══════════════════════════════════════════════════════════════════════ */
.tab{padding:13px 18px;background:transparent;border:none;color:var(--mu);font:600 13px Inter,sans-serif;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:all .15s;margin-bottom:-1px;position:relative}
.tab:hover{color:var(--tx);background:transparent}
.tab::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:transparent;transition:background .15s}
.tab:hover::after{background:#cbd5e1}
.tab.on{color:var(--acc);border-bottom-color:var(--acc)}
.tab.on::after{display:none}
/* ═══════════════════════════════════════════════════════════════════════
   MAIN CONTENT AREA - Professional Page Layout
   ═══════════════════════════════════════════════════════════════════════ */
main{padding:16px 20px 20px 20px}
.pg{display:none}.pg.on{display:block}

/* ═══════════════════════════════════════════════════════════════════════
   FILTER PANEL CARD - Professional Filter Container
   ═══════════════════════════════════════════════════════════════════════ */
.filter-card{background:#ffffff;border:1px solid var(--bd);border-radius:12px;padding:14px 16px;margin-bottom:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.filter-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--bd)}
.filter-card-title{font-weight:700;color:var(--tx);font-size:14px;display:flex;align-items:center;gap:6px}
.filter-active-count{background:var(--acc);color:#fff;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:700;min-width:32px;text-align:center}
.filter-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.filter-search{flex:0 1 180px}
.filter-group{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.filter-btn-clear{background:var(--s2);border:1px solid var(--bd);color:var(--mu);padding:6px 12px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.filter-btn-clear:hover{background:var(--s3);border-color:var(--acc);color:var(--acc)}

/* ═══════════════════════════════════════════════════════════════════════
   VIEW/SORT TOOLBAR - Showing Count, Sort Options, View Type, Actions
   ═══════════════════════════════════════════════════════════════════════ */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.toolbar-left{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--mu)}
.toolbar-left b{color:var(--tx);font-weight:700;font-size:14px}
.toolbar-center{display:flex;align-items:center;gap:8px}
.sort-btn{background:var(--s2);border:1px solid var(--bd);color:var(--mu);padding:7px 12px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:4px}
.sort-btn:hover{background:var(--s3);border-color:var(--acc);color:var(--acc)}
.sort-btn.active{background:var(--acc);border-color:var(--acc);color:#fff}
.view-toggle{display:flex;border:1px solid var(--bd);border-radius:7px;overflow:hidden;background:#fff}
.view-toggle-btn{padding:6px 11px;background:transparent;border:none;color:var(--mu);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:4px}
.view-toggle-btn:hover{background:var(--s2);color:var(--tx)}
.view-toggle-btn.active{background:var(--acc);color:#fff;border-right:1px solid var(--acc)}
.toolbar-right{display:flex;gap:10px;align-items:center}
.btn-export{background:var(--s2);border:1px solid var(--bd);color:var(--tx);padding:7px 13px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px}
.btn-export:hover{background:var(--s3);border-color:var(--acc)}
.btn-new-primary{background:var(--acc);border:none;color:#fff;padding:8px 16px;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px;box-shadow:0 2px 4px rgba(29,78,216,.2)}
.btn-new-primary:hover{background:#1e40af;box-shadow:0 4px 8px rgba(29,78,216,.3)}

@media (max-width:1366px){.toolbar{gap:12px}.filter-controls{gap:10px}.toolbar-right{gap:8px}}
/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS - Professional States and Sizes
   ═══════════════════════════════════════════════════════════════════════ */
.btn{border:none;border-radius:7px;padding:8px 14px;font:600 12px Inter,sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;transition:all .15s;box-shadow:0 1px 2px rgba(0,0,0,.04);white-space:nowrap}
.btn:hover{box-shadow:0 2px 4px rgba(0,0,0,.08)}
.btn:active{transform:scale(0.98)}
.btn:disabled{opacity:0.6;cursor:not-allowed}
.btn-acc{background:var(--acc);color:#fff;box-shadow:0 2px 4px rgba(29,78,216,.2)}
.btn-acc:hover{background:#1e40af;box-shadow:0 4px 8px rgba(29,78,216,.3)}
.btn-ghost{background:var(--s2);border:1px solid var(--bd);color:var(--tx);box-shadow:none}
.btn-ghost:hover{background:var(--s3);border-color:var(--acc);color:var(--acc)}
.btn-danger{background:#fee2e2;border:1px solid #fecaca;color:#991b1b}
.btn-danger:hover{background:#fecdd3;border-color:#fca5a5}
.btn-success{background:#dcfce7;border:1px solid #bbf7d0;color:#14532d}
.btn-success:hover{background:#bbf7d0;border-color:#86efac}

/* ═══════════════════════════════════════════════════════════════════════
   INPUTS & SELECTS - Professional Form Controls
   ═══════════════════════════════════════════════════════════════════════ */
.inp,.sel{background:var(--s1);border:1px solid var(--bd);border-radius:7px;padding:8px 11px;color:var(--tx);font:13px Inter,sans-serif;outline:none;transition:all .15s;box-shadow:0 1px 2px rgba(0,0,0,.02)}
.inp:hover,.sel:hover{border-color:#cbd5e1}
.inp:focus,.sel:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(29,78,216,.1)}
.inp::placeholder{color:var(--mu)}
.sel{cursor:pointer;padding-right:28px;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 8px center;background-size:16px}
.sel option{background:var(--s1);color:var(--tx)}
/* VIEW TOGGLE */
.vtgl{display:flex;border:1px solid var(--bd);border-radius:7px;overflow:hidden}
.vb{padding:6px 12px;background:transparent;border:none;color:var(--mu);font:600 11px Inter,sans-serif;cursor:pointer;white-space:nowrap;transition:all .15s}
.vb:hover{color:var(--tx);background:var(--s2)}
.vb.on{background:var(--acc);color:#fff}
/* STAT CARDS — 🆕 PRO-LEVEL REDESIGN (pure CSS, same class names/markup as
   before — koi JS/HTML nahi badla, sirf look upgrade hua hai) */
.scards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-bottom:22px}
.sc{position:relative;overflow:hidden;background:var(--s1);border:1px solid var(--bd);border-radius:14px;padding:16px 16px 15px 18px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 20px -12px rgba(15,23,42,.12);transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s cubic-bezier(.2,.8,.2,1);animation:sc-in .35s cubic-bezier(.2,.8,.2,1) backwards}
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--c,var(--acc)),color-mix(in srgb,var(--c,var(--acc)) 40%,transparent))}
.sc:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(15,23,42,.04),0 16px 28px -14px rgba(15,23,42,.22)}
.sc:nth-child(1){animation-delay:.02s}.sc:nth-child(2){animation-delay:.05s}.sc:nth-child(3){animation-delay:.08s}
.sc:nth-child(4){animation-delay:.11s}.sc:nth-child(5){animation-delay:.14s}.sc:nth-child(6){animation-delay:.17s}
.sc:nth-child(7){animation-delay:.2s}.sc:nth-child(n+8){animation-delay:.22s}
.sc-ic{position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;background:color-mix(in srgb,var(--c,var(--acc)) 14%,transparent)}
.sc-lb{font-size:10px;color:var(--mu);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;display:flex;align-items:center;gap:5px;font-weight:700}
.sc-v{font-family:Rajdhani,sans-serif;font-size:30px;font-weight:800;color:var(--c,var(--acc));line-height:1;letter-spacing:.2px}
.sc-s{font-size:11px;color:var(--mu);margin-top:6px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.sc-trend{font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px}
.sc-trend.up{background:#dcfce7;color:#15803d}
.sc-trend.down{background:#fee2e2;color:#b91c1c}
.sc-trend.flat{background:var(--s3);color:var(--mu)}
@keyframes sc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* ALERTS STRIP — 🆕 PRO-LEVEL REDESIGN */
.dash-alerts{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:20px}
.dalert{flex:1 1 230px;display:flex;align-items:flex-start;gap:12px;background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:13px 15px;cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s cubic-bezier(.2,.8,.2,1),border-color .18s;animation:sc-in .35s cubic-bezier(.2,.8,.2,1) backwards}
.dalert:hover{transform:translateY(-2px);box-shadow:0 12px 22px -12px rgba(15,23,42,.2);border-color:color-mix(in srgb,var(--ac,var(--red)) 40%,var(--bd))}
.dalert.ok{opacity:1;cursor:default}
.dalert.ok:hover{transform:none;box-shadow:0 1px 2px rgba(15,23,42,.04);border-color:var(--bd)}
.dalert-ic{font-size:17px;line-height:1;width:36px;height:36px;min-width:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ac,var(--red)) 14%,transparent)}
.dalert-lb{font-size:10.5px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.5px}
.dalert-v{font-family:Rajdhani,sans-serif;font-size:19px;font-weight:700;color:var(--tx);line-height:1.3;margin-top:1px}
.dalert-s{font-size:10.5px;color:var(--mu);margin-top:1px}
/* 🆕 COMMAND CENTER + STATUS STRIP (09-09 fix — pehle inki koi CSS hi nahi
   thi, isliye title/subtitle/status text sab ek hi line mein jam ke ek
   dusre se chipke hue dikhte the). Design language baaki dashboard cards
   (.sc/.dalert) jaisa hi rakha gaya hai. */
.pro-command-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;background:var(--s1);border:1px solid var(--bd);border-radius:14px;padding:14px 16px;margin-bottom:14px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 20px -12px rgba(15,23,42,.12)}
.pro-command-title{flex:1 1 100%;display:flex;align-items:baseline;gap:8px;font-size:15px}
.pro-command-title b{color:var(--tx);font-weight:800}
.pro-command-title span{color:var(--mu);font-size:12px;font-weight:500}
.pro-actions{display:flex;flex-wrap:wrap;gap:8px}
.pro-action{display:inline-flex;align-items:center;gap:6px;background:var(--s2);border:1px solid var(--bd);border-radius:8px;padding:7px 13px;font:600 12px Inter,sans-serif;color:var(--tx);cursor:pointer;transition:all .15s;white-space:nowrap}
.pro-action:hover{background:var(--s3);border-color:var(--acc);color:var(--acc)}
.pro-action.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.pro-action.primary:hover{opacity:.88;color:#fff}
.pro-global-search{display:flex;align-items:center;gap:8px;background:var(--s2);border:1px solid var(--bd);border-radius:8px;padding:6px 12px;flex:1 1 220px;max-width:340px;margin-left:auto;transition:border .15s}
.pro-global-search:focus-within{border-color:var(--acc)}
.pro-global-search span{color:var(--mu);font-size:15px;line-height:1}
.pro-global-search input{border:none;background:transparent;outline:none;flex:1;min-width:0;font:13px Inter,sans-serif;color:var(--tx)}
.pro-global-search input::placeholder{color:var(--mu)}
.pro-global-search kbd{background:var(--s1);border:1px solid var(--bd);border-radius:5px;padding:2px 7px;font:600 10px Inter,sans-serif;color:var(--mu)}
.pro-status-strip{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.pro-status-strip>div{flex:1 1 170px;display:flex;flex-direction:column;gap:3px;background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:11px 14px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.pro-status-strip b{font-size:13px;color:var(--tx);font-weight:700;display:flex;align-items:center;gap:6px}
.pro-status-strip small{font-size:10.5px;color:var(--mu);font-weight:500}
.pro-dot{width:8px;height:8px;min-width:8px;border-radius:50%;display:inline-block;background:var(--mu)}
.pro-dot.good{background:var(--grn);box-shadow:0 0 0 3px color-mix(in srgb,var(--grn) 20%,transparent)}
.pro-dot.warn{background:var(--yel);box-shadow:0 0 0 3px color-mix(in srgb,var(--yel) 20%,transparent)}
.pro-dot.bad{background:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 20%,transparent)}
@media (max-width:640px){.pro-global-search{flex:1 1 100%;max-width:none;margin-left:0}}
/* CHARTS */
.dcharts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:22px}
.dchart-legend{display:flex;flex-wrap:wrap;gap:8px 14px;padding:10px 14px;font-size:11px}
.dchart-legend span{display:flex;align-items:center;gap:5px;color:var(--mu)}
.dchart-legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
.dchart-legend b{color:var(--tx)}
.dchart-body{padding:10px 14px 16px;display:flex;align-items:center;justify-content:center}
.dc-par-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px;align-items:start}
@media(max-width:1100px){.dc-par-row{grid-template-columns:1fr}}
.dc-par-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dc-par-hd .dc-par-sum{margin-left:auto;font-family:Inter,sans-serif;font-size:11.5px;font-weight:500;color:var(--mu)}
.dc-par-hd .dc-par-sum b{font-weight:700}
.dc-parbars{padding:8px 12px 12px;display:flex;flex-direction:column;gap:2px}
.dc-parbars.all{max-height:440px;overflow-y:auto}
.dc-prow{display:grid;grid-template-columns:minmax(110px,200px) 1fr minmax(120px,auto);align-items:center;gap:12px;padding:5px 8px;border-radius:8px;cursor:pointer;transition:background .12s}
.dc-prow:hover{background:var(--s2)}
.dc-pnm{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-ptrack{height:16px;background:var(--s3);border-radius:5px;overflow:hidden}
.dc-pfill{height:100%;min-width:3px;border-radius:5px}
.dc-pval{font-family:'DM Mono',monospace;font-size:11.5px;font-weight:700;text-align:right;white-space:nowrap}
.dc-pval small{font-family:Inter,sans-serif;font-size:10.5px;font-weight:500;color:var(--mu)}
.dc-pempty{padding:18px 8px;color:var(--mu);font-size:12px;text-align:center}
@media(max-width:768px){.dc-prow{grid-template-columns:90px 1fr auto;gap:8px}.dc-par-hd .dc-par-sum{margin-left:0;width:100%;order:3}}
/* TABLES */
/* FIX: .twrap (order/hold/etc table wrapper) sirf overflow-x:auto set karta
   tha, jisse overflow-y bhi automatically 'auto' ban jaata tha (CSS spec rule
   jab ek axis non-visible ho aur dusra visible ho — aur yeh tab bhi hota hai
   jab overflow-y explicitly 'visible' likha ho, kyunki spec ke hisaab se jab
   dono axis mein se ek 'visible' na ho to dusra bhi force se 'auto' ban jaata
   hai). Is se yeh div khud ek scroll-container ban jaata tha aur uske andar
   table ka thead position:sticky page ki jagah is div ke relative "stick"
   karne lagta tha, jisse header table ke beech mein detach/float ho jaata
   tha (jaise Hold Orders table mein ho raha tha). overflow-x:auto hata kar
   overflow:visible kar diya hai (jaisa #ow ke liye pehle se tha) taaki poora
   page hi ek natural scrollbar ke saath scroll ho aur thead sahi se page ke
   top ke relative chipke — bahut wide table hone par ab poora page hi
   horizontally scroll hoga. */
.twrap{background:#fff;border:1px solid #dde1ea;border-radius:10px;overflow:visible;box-shadow:0 1px 6px rgba(0,0,0,.06)}
/* FIX: #ow (order table wrapper) sirf .twrap se overflow-x:auto inherit karta tha,
   jisse overflow-y bhi automatically 'auto' ban jaata tha (CSS spec rule jab ek axis
   non-visible ho aur dusra visible ho) — is se yeh div khud ek scroll-container ban
   jaata tha aur thead ka position:sticky page ki jagah is div ke relative "stick" karne
   lagta tha, jisse header table ke beech mein detach/float ho jaata tha scroll karte
   waqt. Yahan overflow ko visible kar diya hai taaki page hi ek natural scrollbar ke
   saath scroll ho (jaisa syncStickyLayout() ke comment mein already intend tha), aur
   thead sahi se page ke top ke relative chipke. */
#ow{overflow:visible}
/* ═══════════════════════════════════════════════════════════════════════
   ORDER TABLE - Professional ERP Table Design
   ═══════════════════════════════════════════════════════════════════════ */
table.ot{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;background:#fff;border:1px solid var(--bd);border-radius:8px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04)}
table.ot thead th{background:#f8fafc;color:#334155;padding:11px 12px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;position:sticky;top:var(--stick-top,90px);white-space:nowrap;cursor:pointer;user-select:none;z-index:2;border-bottom:1px solid var(--bd);border-right:1px solid var(--bd)}
/* Modal tables scroll inside their own small box (mbody), not under the
   page header+nav — so they must stick to their own top (0), not the
   page's --stick-top offset. Without this the header floats mid-table
   inside the modal's scroll area. */
.mbody table.ot thead th{top:0}
table.ot thead th:hover{background:#eff6ff;color:var(--acc)}
table.ot thead th:last-child{border-right:none}
table.ot tbody td{padding:10px 12px;border-bottom:1px solid #f1f5f9;white-space:nowrap;vertical-align:middle;color:var(--tx);font-weight:500;transition:background .15s}
table.ot tbody tr{transition:background .15s}
table.ot tbody tr:hover td{background:#f0f4ff;font-weight:500}
table.ot tbody tr:nth-child(even) td{background:transparent}
table.ot tbody tr:last-child td{border-bottom:none}
/* STATUS ROW COLORS — outrank the alternating-row background so every
   status tint remains visible, including on even-numbered rows. */
table.ot tbody tr.s-Pending td{background:#fff1f2;color:#991b1b}
table.ot tbody tr.s-In-Production td{background:#fffbeb;color:#713f12}
table.ot tbody tr.s-Cancelled td{background:#fef2f2;color:#7f1d1d}
table.ot tbody tr.s-Pending td:first-child{border-left:4px solid #dc2626}
table.ot tbody tr.s-In-Production td:first-child{border-left:4px solid #d97706}
table.ot tbody tr.s-Cancelled td:first-child{border-left:4px solid #b91c1c}
table.ot tbody tr.s-Pending:hover td{background:#ffe4e6}
table.ot tbody tr.s-In-Production:hover td{background:#fef3c7}
table.ot tbody tr.s-Cancelled:hover td{background:#fee2e2}
tr.row-selected td{background:#dbeafe!important;outline:2px solid #2563eb;outline-offset:-1px}
table.ot tbody tr{cursor:pointer}
/* New Order row ko main page ke natural scrollbar ke saath easily accessible rakho.
   Sticky header ke neeche row chhup na jaaye jab New Order button dabaya jaaye. */
#ar-tr{scroll-margin-top:calc(var(--stick-top,90px) + 18px);scroll-margin-bottom:24px;position:relative;z-index:20}
/* ADD ROW */
.ar-row td{padding:3px 5px;border-top:3px dashed #2563eb;border-bottom:1px solid #bfdbfe;background:#eff6ff;position:relative;z-index:21}
.ar-inp{background:#fff;border:1px solid #bfdbfe;border-radius:5px;padding:5px 6px;color:#1e293b;font:12px Inter,sans-serif;outline:none;width:100%}
.ar-inp:focus{border-color:#2563eb;box-shadow:0 0 0 2px #bfdbfe}
/* BADGES */
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;cursor:pointer}
/* ACTION BTNS */
.acts{display:flex;gap:3px}
.abt{width:25px;height:25px;border-radius:5px;border:1px solid #e2e8f0;background:#f8fafc;color:#64748b;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.abt:hover{color:#1e293b;background:#e2e8f0}
.abt.pr:hover{color:#fff;background:var(--blu);border-color:var(--blu)}
.abt.dl:hover{color:#fff;background:var(--red);border-color:var(--red)}
/* INLINE EDITABLE */
.ri{background:transparent;border:none;color:var(--tx);font:12px "DM Mono",monospace;width:52px;outline:none;text-align:center}
.ri:focus{background:var(--s2);border-radius:4px}
.di{background:transparent;border:none;color:var(--mu);font:11px Inter,sans-serif;outline:none;width:82px}
.di:focus{background:var(--s2);border-radius:4px;color:var(--tx)}
/* SUMMARY TABLES — 🆕 PRO-LEVEL REDESIGN (pure CSS, same class names) */
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}
.stbl{background:var(--s1);border:1px solid var(--bd);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 24px -16px rgba(15,23,42,.14);animation:sc-in .35s cubic-bezier(.2,.8,.2,1) backwards}
.stbl-hd{padding:13px 16px;background:linear-gradient(180deg,var(--s1),var(--s2));border-bottom:1px solid var(--bd);font-family:Rajdhani,sans-serif;font-size:15px;font-weight:700;letter-spacing:.2px}
.stbl table{width:100%;border-collapse:collapse}
.stbl th{background:var(--s2);padding:8px 10px;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--mu);text-align:left;font-weight:700}
.stbl td{padding:8px 10px;border-top:1px solid var(--bd);font-size:12px}
.stbl tbody tr{transition:background .12s}
.stbl tr:hover td{background:var(--s2)}
.stbl .tr-tot td{font-weight:700;color:var(--acc);background:var(--s2)}
/* MASTERS */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mcard{background:var(--s1);border:1px solid var(--bd);border-radius:10px;overflow:hidden}
.mcard-hd{padding:11px 14px;background:var(--s2);border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between}
.mcard-title{font-family:Rajdhani,sans-serif;font-size:15px;font-weight:700}
.mlist{max-height:240px;overflow-y:auto}
.mi{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-bottom:1px solid var(--bd)}
.mi:hover{background:var(--s2)}
.mi:last-child{border-bottom:none}
.madd{padding:9px 12px;border-top:1px solid var(--bd);background:var(--s2);display:flex;gap:7px}
.madd .inp{flex:1;padding:6px 9px;font-size:12px}
.mbtn{background:var(--acc);border:none;border-radius:6px;padding:6px 12px;font:700 12px Inter,sans-serif;color:#fff;cursor:pointer}
/* BOX CARDS */
.box-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:20px}
.bc{background:var(--s1);border:1px solid var(--bd);border-radius:10px;padding:14px}
.bc-name{font-family:Rajdhani,sans-serif;font-size:15px;font-weight:700;margin-bottom:8px}
.bc-row{display:flex;justify-content:space-between;font-size:12px;color:var(--mu);margin-bottom:4px}
.bc-row span:last-child{font-family:"DM Mono",monospace;font-weight:600}
.pbar{background:var(--bd);border-radius:3px;height:5px;margin:7px 0}
.pbar-f{height:100%;border-radius:3px}
.bc-st{text-align:center;padding:4px;border-radius:6px;font-size:11px;font-weight:700;margin-top:6px}
/* MODAL */
.mo{display:none;position:fixed;inset:0;background:rgba(15,23,42,.6);z-index:500;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.mo.on{display:flex}
.mbox{background:var(--s1);border:1px solid var(--bd);border-radius:14px;width:820px;max-width:96vw;max-height:92vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.7)}
.mhd{padding:16px 20px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--s1);border-radius:14px 14px 0 0;z-index:2}
.mhd-t{font-family:Rajdhani,sans-serif;font-size:18px;font-weight:700;color:var(--acc)}
.mcl{width:28px;height:28px;border-radius:6px;background:var(--s2);border:1px solid var(--bd);color:var(--mu);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mcl:hover{color:var(--tx)}
.mbody{padding:20px}
.mft{padding:14px 20px;border-top:1px solid var(--bd);display:flex;justify-content:flex-end;gap:10px;position:sticky;bottom:0;background:var(--s1);border-radius:0 0 14px 14px}
.fg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:14px}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.fg-lb{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--mu);margin-bottom:4px}
.fi{background:var(--s2);border:1px solid var(--bd);border-radius:7px;padding:7px 10px;color:var(--tx);font:13px Inter,sans-serif;outline:none;width:100%}
.fi:focus{border-color:var(--acc)}
.fi.err{border-color:var(--red)}
/* SIZE SECTION */
.sz-wrap{background:var(--s2);border:1px solid var(--bd);border-radius:8px;padding:12px;margin-bottom:14px}
.sz-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--mu)}
.sz-tot{font-family:Rajdhani,sans-serif;font-size:22px;font-weight:700;color:var(--acc)}
.sz-grid{display:grid;grid-template-columns:repeat(11,1fr);gap:6px}
.sz-b{display:flex;flex-direction:column;align-items:center;gap:3px}
.sz-b label{font-size:10px;font-family:"DM Mono",monospace;color:var(--mu);font-weight:700}
.sz-b input{width:100%;background:var(--s1);border:1px solid var(--bd);border-radius:5px;padding:6px 3px;color:var(--tx);font:700 13px "DM Mono",monospace;text-align:center;outline:none;-webkit-appearance:none;-moz-appearance:textfield}
.sz-b input:focus{border-color:var(--acc)}
/* REPORTS */
.rtab{padding:7px 14px;border-radius:7px;border:1px solid var(--bd);background:var(--s2);color:var(--mu);font:600 12px Inter,sans-serif;cursor:pointer;transition:all .15s}
.rtab:hover{color:var(--tx)}
.rtab.on{background:var(--acc);border-color:var(--acc);color:#fff}
/* 🆕 Pending Production PO highlight — jis sole ka koi bhi production
   batch abhi tak bina PO ke pada hai (ya sirf partial PO bana hai), uska
   tab solid orange/red background + white bold text mein highlight hota
   hai taaki list mein turant, ek nazar mein pehchana ja sake ki kis sole
   ko follow-up chahiye — pehle sirf halka cream background tha jo baaki
   plain tabs se mushkil se alag dikhta tha. */
.rtab-nopo{background:#ea580c;border-color:#c2410c;color:#fff;font-weight:700;box-shadow:0 1px 3px rgba(234,88,12,.4)}
.rtab-nopo:hover{background:#c2410c;color:#fff}
.rtab-nopo.on{background:var(--acc);border-color:#ea580c;box-shadow:0 0 0 2px #fdba74 inset;color:#fff}
.rtab-nopo-badge{background:#fff;color:#c2410c;border-radius:20px;padding:0 6px;font-size:10px;font-weight:800;margin-left:5px;display:inline-block;vertical-align:middle}
.rpt-sec{background:var(--s1);border:1px solid var(--bd);border-radius:10px;overflow:hidden;margin-bottom:16px}
.rpt-hd{padding:10px 14px;background:var(--s2);border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}
.rpt-hd:hover{background:var(--s3)}
.rpt-title{font-family:Rajdhani,sans-serif;font-size:15px;font-weight:700}
.rpt-body{overflow:auto}
.rpt-body.hide{display:none}
.rpt-tbl{width:100%;border-collapse:collapse;font-size:12px}
.rpt-tbl th{background:var(--s2);padding:7px 9px;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--mu);text-align:center;border:1px solid var(--bd)}
.rpt-tbl th:first-child{text-align:left}
.rpt-tbl td{padding:6px 9px;border:1px solid var(--bd);text-align:center;font-size:12px}
.rpt-tbl td:first-child{text-align:left;font-weight:600}
.rpt-tbl tr:hover td{background:var(--s2)}
.rpt-tbl .tr-tot td{background:rgba(245,166,35,.08);font-weight:700;color:var(--acc)}
.rpt-tbl .tr-sub td{background:rgba(255,255,255,.02);font-size:11px;color:var(--mu)}
.rpt-tbl .tr-sub td:first-child{padding-left:20px;color:var(--tx)}
/* SOLE */
.sole-btns{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.sole-tbl{width:100%;border-collapse:collapse}
.sole-tbl th{background:var(--s2);padding:7px 9px;font-size:10px;border:1px solid var(--bd);text-align:center;text-transform:uppercase;letter-spacing:.5px;color:var(--mu)}
.sole-tbl th:first-child{text-align:left}
.sole-tbl td{padding:7px 9px;border:1px solid var(--bd);text-align:center;font-family:"DM Mono",monospace;font-size:12px;font-weight:600}
.sole-tbl td:first-child{text-align:left;font-family:Inter,sans-serif;font-size:11px;color:var(--mu);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.c-neg{color:var(--red)}.c-pos{color:var(--grn)}.c-zero{color:var(--mu)}

/* PRO SOLE STOCK UI — visual hierarchy only; calculations/data logic unchanged */
.sole-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:9px;padding:10px 12px;background:var(--s1);border:1px solid var(--bd);border-radius:10px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.sole-search-wrap{display:flex;align-items:center;gap:6px;min-width:280px;max-width:420px;flex:1}
.sole-search-wrap .inp{width:100%;max-width:none}
.sole-search-icon{font-size:18px;color:#475569;font-weight:800}
.sole-search-count{font:700 11px "DM Mono",monospace;color:#475569;white-space:nowrap}
.sole-toolbar-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.sole-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:-1px 0 10px;padding:7px 10px;border:1px solid #dbe4ef;border-radius:8px;background:#f8fafc;color:#334155;font-size:10.5px;font-weight:600}
.sole-legend b{color:#0f172a}
.legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}
.dot-alert{background:#dc2626}.dot-ok{background:#16a34a}.dot-po{background:#7c3aed}
.sole-card{background:var(--s1);border:1px solid #cbd5e1;border-radius:12px;overflow:hidden;margin-bottom:14px;box-shadow:0 2px 6px rgba(15,23,42,.06)}
.sole-card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 14px;background:linear-gradient(180deg,#f8fafc,#f1f5f9);border-bottom:1px solid #cbd5e1}
.sole-title-wrap{min-width:170px}.sole-title{font-family:Rajdhani,sans-serif;font-size:17px;font-weight:800;color:#0f172a;letter-spacing:.15px}.sole-title-meta{font-size:9.5px;color:#64748b;margin-top:2px}
.sole-head-kpis{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.sole-head-kpi{min-width:82px;padding:5px 9px;border:1px solid #d7dee8;border-radius:7px;background:#fff;text-align:center}.sole-head-kpi small{display:block;font-size:8.5px;text-transform:uppercase;letter-spacing:.45px;color:#64748b;font-weight:800}.sole-head-kpi b{display:block;margin-top:1px;font:800 15px "DM Mono",monospace;color:#0f172a}.sole-head-kpi.is-positive b{color:#15803d}.sole-head-kpi.is-negative{border-color:#fecaca;background:#fff7f7}.sole-head-kpi.is-negative b{color:#dc2626}.sole-head-kpi.is-alert{border-color:#fecaca;background:#fff1f2}.sole-head-kpi.is-alert b{color:#dc2626}.sole-head-kpi.is-clear b{color:#15803d}
.sole-summary-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:7px 12px;background:#fff;border-bottom:1px solid #e2e8f0;color:#334155;font-size:10.5px}.sole-summary-hint{color:#64748b}.sole-action-alert{margin-left:auto;padding:3px 8px;border-radius:20px;background:#fee2e2;color:#b91c1c;font-weight:800}.sole-action-ok{margin-left:auto;padding:3px 8px;border-radius:20px;background:#dcfce7;color:#166534;font-weight:800}
.sole-table-wrap{overflow:auto;max-height:62vh}.sole-tbl{min-width:780px}.sole-tbl th{position:sticky;top:0;z-index:2;background:#eaf0f7;color:#334155;border-color:#cbd5e1;font-weight:800}.sole-tbl th:first-child{min-width:220px}.sole-tbl td{color:#172033;border-color:#dbe2ea;background:#fff}.sole-tbl td:first-child{color:#1e293b}.sole-tbl tbody tr:hover td{background:#f8fafc}.sole-data-row.sole-row-prod td{background:#fffbeb}.sole-data-row.sole-row-projected td{background:#f0fdf4;font-weight:750}.sole-data-row.sole-row-pending td{background:#faf5ff}.sole-data-row.sole-row-balance td{background:#f8fafc;font-weight:750}.sole-data-row.sole-row-need td{background:#fff7f7}.sole-label-main{font-weight:800;color:#1e293b}.sole-data-row .c-neg{font-weight:850;color:#dc2626}.sole-data-row .c-pos{font-weight:850;color:#15803d}.sole-data-row .c-zero{color:#64748b}
.sole-section-break td{padding:5px 10px!important;background:#eef2f7!important;color:#475569!important;font:800 9px Inter,sans-serif!important;text-align:left!important;letter-spacing:.75px;text-transform:uppercase;border-top:1px solid #cbd5e1!important;border-bottom:1px solid #cbd5e1!important}
.sole-po-break td{background:#f5f3ff!important;color:#6d28d9!important}
@media(max-width:900px){.sole-card-head{align-items:flex-start;flex-direction:column}.sole-head-kpis{width:100%;justify-content:flex-start}.sole-summary-hint{width:100%}.sole-action-alert,.sole-action-ok{margin-left:0}.sole-table-wrap{max-height:none}.sole-toolbar{align-items:stretch;flex-direction:column}.sole-search-wrap{max-width:none}.sole-toolbar-actions{margin-left:0}}
/* TOAST */
.toast{position:fixed;bottom:20px;right:20px;padding:12px 18px;border-radius:9px;font-weight:700;font-size:13px;z-index:9999;transform:translateY(80px);opacity:0;transition:all .3s;pointer-events:none}
.toast.on{transform:translateY(0);opacity:1}
.nbadge{background:rgba(34,197,94,.2);color:var(--grn);font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;margin-left:4px}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}
/* TIME SAVING FEATURES */
.qs-bar{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:7px 12px;background:#f0f9ff;border-bottom:1px solid #bae6fd;align-items:center;scrollbar-width:thin;min-width:0;white-space:nowrap}
.qs-bar>*{flex-shrink:0}
.qs-btn{padding:4px 12px;border-radius:6px;border:1px solid #bae6fd;background:#fff;color:#0369a1;font:600 11px Inter,sans-serif;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:4px;flex-shrink:0;white-space:nowrap}
.qs-btn:hover{background:#0369a1;color:#fff;border-color:#0369a1}
.qs-btn.on{background:#0369a1;color:#fff;border-color:#0369a1;box-shadow:0 0 0 2px rgba(3,105,161,.14) inset}
.qs-btn.red{border-color:#fca5a5;color:#dc2626}
.qs-btn.red:hover{background:#dc2626;color:#fff}
.qs-btn.grn{border-color:#86efac;color:#16a34a}
.qs-btn.grn:hover{background:#16a34a;color:#fff}
.qs-btn.org{border-color:#fcd34d;color:#d97706}
.qs-btn.org:hover{background:#d97706;color:#fff}
.qs-sep{width:1px;height:20px;background:#bae6fd;flex-shrink:0}

/* OPTION 1 — compact Shortcuts control: keep it in the same action row. */
#qs-bar .qs-shortcuts-btn{
  margin-left:auto;
  padding:4px 8px;
  font-size:10.5px;
  min-width:max-content;
}
#qs-bar::-webkit-scrollbar{height:5px}

/* EXCEL MASTER (submenu under Master Order) */
.xl-bar{display:flex;gap:8px;flex-wrap:wrap;padding:9px 12px;background:#f0fdf4;border:1px solid #a5d6a7;border-radius:8px;align-items:center;margin-bottom:10px}
.xl-title{font-size:11px;font-weight:700;color:#2e7d32;white-space:nowrap}
/* Due date highlight */
tr.due-today td{background:#fef9c3!important;outline:1px solid #d97706}
tr.due-overdue td{background:#fee2e2!important;outline:1px solid #dc2626}
/* DUP EXACT — same Party + Article + Colour + Factory. Keep the red
   warning as a row outline/leading stripe instead of red separators
   between every cell; the status badge remains visible in its column. */
tr.dup-exact td{border-top:1px solid #f87171!important;border-bottom:1px solid #f87171!important;background:#fff1f2!important}
tr.dup-exact td:first-child{border-left:4px solid #dc2626!important}
tr.dup-exact td:last-child{border-right:1px solid #f87171!important}
tr.dup-exact:hover td{background:#ffe4e6!important}
tr.dup-exact td:first-child{position:relative}
tr.dup-exact td:first-child::before{content:'🔴 DUP';font-size:8px;color:#dc2626;font-weight:800;display:block;letter-spacing:.5px;line-height:1.2}
/* DUP SOFT — same Party + Article + Colour, different Factory */
tr.dup-soft td:first-child{border-left:4px solid #f97316!important}
tr.dup-soft td:first-child::before{content:'🟠 DUP';font-size:8px;color:#ea580c;font-weight:700;display:block;letter-spacing:.5px;line-height:1.2}
/* DUP tooltip chip */
.dup-chip{display:inline-flex;align-items:center;gap:3px;background:#fff7ed;border:1px solid #fed7aa;border-radius:4px;padding:1px 5px;font-size:9px;font-weight:700;color:#c2410c;cursor:pointer;margin-left:3px;white-space:nowrap;vertical-align:middle}
.dup-chip:hover{background:#ffedd5}
/* LIVE DUP WARNING ROW inside add-row */
#ar-dup-warn td{padding:0!important;border:none!important;background:transparent!important}
.ar-dup-inner{background:#fff7ed;border:1px solid #fed7aa;border-radius:7px;padding:7px 12px;font-size:11px;color:#92400e;display:flex;align-items:flex-start;gap:8px;margin:2px 4px 4px}
.ar-dup-inner.exact{background:#fff1f2;border-color:#fca5a5;color:#991b1b}
.ar-dup-inner b{font-size:12px}
.ar-dup-table{width:100%;border-collapse:collapse;margin-top:5px;font-size:11px}
.ar-dup-table th{background:rgba(0,0,0,.05);padding:3px 7px;text-align:left;font-size:9px;text-transform:uppercase;letter-spacing:.5px}
.ar-dup-table td{padding:3px 7px;border-top:1px solid rgba(0,0,0,.06)}
/* DUP CONFIRM MODAL */
#mo-dup{z-index:600}
.dup-mo-row{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--s2);border-radius:8px;margin-bottom:6px;font-size:12px}
.dup-mo-badge{padding:2px 8px;border-radius:12px;font-size:10px;font-weight:700}
/* Template modal */
.tpl-list{max-height:200px;overflow-y:auto}
.tpl-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #f1f5f9;cursor:pointer}
.tpl-item:hover{background:#f0f9ff}
.tpl-name{font-weight:600;font-size:13px;color:#1e293b}
.tpl-meta{font-size:11px;color:#64748b}
/* Shortcuts hint */
.shortcut-hint{position:fixed;bottom:16px;left:16px;background:#1e293b;color:#f1f5f9;padding:10px 14px;border-radius:8px;font-size:11px;z-index:200;line-height:1.8;display:none;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.shortcut-hint b{color:#38bdf8}
.shortcut-hint.show{display:block}
@media(max-width:768px){.sgrid,.mgrid,.dcharts{grid-template-columns:1fr}.scards{grid-template-columns:repeat(2,1fr)}.dash-alerts{flex-direction:column}}
/* PAGINATION */
.pgbar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:#fff;border:1px solid var(--bd);border-radius:8px;font-size:12px;color:var(--mu);flex-wrap:wrap;gap:8px;margin:8px 0 14px;position:sticky;bottom:8px;z-index:3;box-shadow:0 3px 14px rgba(15,23,42,.08)}
.pgbar .pginfo{color:var(--tx);font-weight:600}
.pgbar .pgbtns{display:flex;gap:4px;align-items:center}
.pgbtn{padding:4px 10px;border-radius:6px;border:1px solid var(--bd);background:var(--s2);color:var(--mu);font:600 11px Inter,sans-serif;cursor:pointer;transition:all .15s}
.pgbtn:hover:not(:disabled){background:var(--acc);color:#fff;border-color:var(--acc)}
.pgbtn:disabled{opacity:.4;cursor:default}
.pgbtn.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.pgsize{padding:4px 8px;border-radius:6px;border:1px solid var(--bd);background:var(--s2);color:var(--tx);font:600 11px Inter,sans-serif;cursor:pointer;outline:none}
/* DRAFT BADGE */
.draft-badge{display:none;background:#fef9c3;border:1px solid #fde68a;border-radius:6px;padding:3px 10px;font-size:11px;font-weight:700;color:#92400e;align-items:center;gap:5px}
.draft-badge.show{display:inline-flex}
/* MULTI-SELECT PARTY FILTER */
.msel{position:relative;display:inline-block}
.mo-sort-box{display:flex;align-items:center;gap:5px;margin-right:4px;padding:2px;border:1px solid #bae6fd;border-radius:8px;background:#f8fcff;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.mo-sort-field{height:28px;max-width:150px;border:1px solid #bae6fd;border-radius:6px;background:#fff;color:#0f3b63;font:600 11px Inter,sans-serif;padding:0 24px 0 8px;outline:none;cursor:pointer}
.mo-sort-field:focus{border-color:var(--acc);box-shadow:0 0 0 2px rgba(14,165,233,.12)}
.mo-sort-box .qs-btn{height:28px}
@media(max-width:1366px){.mo-sort-field{max-width:130px}}
.msel-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:140px}
.msel-btn .msel-arrow{font-size:9px;opacity:.6}
.msel-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:500;background:var(--s1);border:1px solid var(--acc);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.25);width:230px;display:none;overflow:hidden}
.msel-panel.open{display:block}

/* ---- Work Date panel: same look as other checkbox dropdowns (Article/Sole msel) ---- */
.wd-date-list{max-height:220px}
.msel-search{width:100%;border:none;border-bottom:1px solid var(--bd);padding:8px 10px;font:12px Inter,sans-serif;outline:none;box-sizing:border-box}
.msel-actions{display:flex;border-bottom:1px solid var(--bd)}
.msel-actions button{flex:1;border:none;background:var(--s2);color:var(--acc);font:600 11px Inter,sans-serif;padding:6px 0;cursor:pointer}
.msel-actions button:hover{background:#eff6ff}
.msel-list{max-height:220px;overflow-y:auto;padding:4px 0}
.msel-opt{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:12px;cursor:pointer;color:var(--tx)}
.msel-opt:hover{background:var(--s2)}
.msel-opt input{cursor:pointer}
.msel-empty{padding:10px 12px;font-size:12px;color:var(--mu)}
/* CUSTOM DROPDOWN */
.cd-wrap{position:relative;display:inline-block}
.cd-list{position:fixed;z-index:9999;background:var(--s1);border:1px solid var(--acc);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.35);min-width:140px;max-width:220px;max-height:220px;overflow-y:auto;display:none}
.cd-list.open{display:block}
.cd-item{padding:7px 12px;font-size:12px;cursor:pointer;color:var(--tx);white-space:nowrap;display:flex;align-items:center;gap:6px}
.cd-item:hover,.cd-item.sel{background:var(--acc);color:#fff}
.cd-item .cd-sub{font-size:10px;opacity:.7;margin-left:auto}
.cd-empty{padding:10px 12px;font-size:11px;color:var(--mu);font-style:italic}
/* QUICK MASTER MINI MODAL */
#qm-modal{position:fixed;z-index:10000;display:none;background:#1e293b;border:2px solid var(--acc);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.6);padding:14px 16px;min-width:260px}
#qm-modal.open{display:block}
#qm-modal .qm-title{font-family:Rajdhani,sans-serif;font-size:15px;font-weight:700;color:#38bdf8;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
#qm-modal .qm-title span{font-size:10px;color:#64748b;font-family:Inter,sans-serif;font-weight:400}
#qm-modal .qm-inp{width:100%;background:#0f172a;border:1px solid #334155;border-radius:6px;padding:7px 10px;color:#f1f5f9;font:13px Inter,sans-serif;outline:none;margin-bottom:8px}
#qm-modal .qm-inp:focus{border-color:var(--acc)}
#qm-modal .qm-row{display:flex;gap:7px;margin-bottom:8px}
#qm-modal .qm-row .qm-inp{margin-bottom:0}
#qm-modal .qm-hint{font-size:10px;color:#475569;margin-bottom:10px}
#qm-modal .qm-btns{display:flex;gap:7px}
#qm-modal .qm-save{flex:1;background:var(--acc);border:none;border-radius:6px;padding:7px;font:700 12px Inter,sans-serif;color:#fff;cursor:pointer}
#qm-modal .qm-save:hover{opacity:.85}
#qm-modal .qm-cancel{background:#334155;border:none;border-radius:6px;padding:7px 12px;font:600 12px Inter,sans-serif;color:#94a3b8;cursor:pointer}
#qm-modal .qm-cancel:hover{color:#f1f5f9}

/* ================= RESPONSIVE — HAR SCREEN/SYSTEM SIZE KE HISAB SE AUTO-FIT ================= */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{max-width:100%}
img,svg{max-width:100%;height:auto}

/* Bade monitors (Full HD+/4K) par thoda bada aur comfortable */
@media(min-width:1600px){
  body{font-size:14px}
  main{padding:24px}
  .scards{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}

/* Chhote laptop / small desktop */
@media(max-width:1200px){
  .box-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .scards{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}

/* Tablet landscape */
@media(max-width:1024px){
  header{flex-wrap:wrap;height:auto;min-height:52px;padding:8px 14px;gap:6px 14px}
  .hst{flex-wrap:wrap;gap:6px 16px}
  main{padding:14px}
  .sz-grid{grid-template-columns:repeat(6,1fr)}
  .mbox{width:92vw}
}

/* Tablet portrait */
@media(max-width:900px){
  .sgrid{grid-template-columns:1fr}
  .mgrid{grid-template-columns:1fr}
  .fg3{grid-template-columns:1fr 1fr}
}

/* Mobile landscape / small tablet */
@media(max-width:768px){
  body{font-size:12px}
  header{padding:8px 12px}
  .logo{font-size:17px}
  .hst{font-size:10px;gap:5px 12px}
  nav{padding:0 12px}
  .tab{padding:8px 11px;font-size:12px}
  .nav-admin-dropdown{min-width:195px}
  main{padding:10px}
  .scards{grid-template-columns:repeat(2,1fr);gap:8px}
  .box-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
  .mbox{width:96vw;border-radius:10px}
  .mhd{padding:12px 14px}
  .mbody{padding:14px}
  .fg3{grid-template-columns:1fr 1fr}
  .fg2{grid-template-columns:1fr}
  .sz-grid{grid-template-columns:repeat(4,1fr);gap:5px}
  .stbl-hd,.mcard-title{font-size:14px}
}

/* Mobile portrait */
@media(max-width:480px){
  .scards{grid-template-columns:1fr 1fr;gap:6px}
  .fg3,.fg2{grid-template-columns:1fr}
  .sz-grid{grid-template-columns:repeat(3,1fr)}
  header{padding:6px 10px}
  header .hst span{font-size:9px}
  .logo{font-size:15px}
  .mhd-t{font-size:15px}
  .btn{padding:6px 10px;font-size:11px}
}

/* ============ HEIGHT-BASED COMPACTING (chhoti height wale screens/tablets/laptops jaise D330 ke liye) ============ */
/* Windows taskbar + browser address-bar mila kar 800px screen par usually ~600-650px hi milta hai */
@media(max-height:820px){
  header{height:44px;min-height:44px;padding:0 16px}
  .logo{font-size:16px}
  .hst{font-size:10px;gap:3px 10px}
  #fs-btn{padding:3px 8px;font-size:10px;margin-left:6px}
  nav{padding:0 16px}
  .tab{padding:6px 12px;font-size:12px}
  .nav-admin-dropdown{min-width:190px}
  main{padding:10px}
  .scards{gap:6px;margin-bottom:10px}
  .sgrid,.mgrid{gap:10px}
  .stbl-hd{padding:8px 10px;font-size:13px}
}
@media(max-height:700px){
  header{height:auto;flex-wrap:wrap;padding:4px 14px}
  .hst span{display:none}
  main{padding:8px}
  .scards{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:5px}
  .stbl-hd{padding:6px 8px;font-size:12px}
  .box-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:5px}
}
@media(max-height:560px){
  nav{padding:0 10px}
  .tab{padding:5px 9px;font-size:11px}
  .nav-admin-dropdown{min-width:185px}
  .mbox{max-height:88vh}
  .mbody{max-height:70vh;overflow:auto}
}
@media(max-width:480px){
  .qs-bar{padding:6px 10px}
  .xl-bar{padding:7px 10px}
  #q{width:170px!important}
}

/* STAFF READ-ONLY MODE: poori app visible, admin/data-edit controls disabled. */
.staff-disabled { opacity:.48 !important; cursor:not-allowed !important; filter:grayscale(.15); }
body.staff-readonly .staff-disabled { pointer-events:none !important; }
body.staff-readonly .rchk,
body.staff-readonly #chk-all,
body.staff-readonly .sd-row-check,
body.staff-readonly #sd-check-all { opacity:1 !important; cursor:pointer !important; pointer-events:auto !important; }

/* Master Order: compact page navigation stays visible while scrolling the long order list. */
.ot + .pgbar{backdrop-filter:blur(6px)}

/* FINAL MASTER ORDER TABLE LAYOUT FIX
   Keep the Master Order table as one normal table. The New Order entry row
   belongs at the bottom (after the current list + Grand Total), while the
   table itself may scroll horizontally inside the page. Only the entry row's
   Save/Cancel cell stays visible at the right edge so the Save button is never
   cut off. The normal Actions header/column is NOT sticky.
   FIX (screen shakes/jitters on mouse-wheel scroll on this page): overflow-y
   was 'visible' here, but per the CSS overflow spec, whenever one axis
   (overflow-x) is a non-visible value like 'auto', the browser silently
   forces the OTHER axis to compute as 'auto' too — even if you write
   'visible' with !important. That turned #ow into its own vertical scroll
   container fighting with the page's own scroll on every wheel tick, which
   is what caused the shake. #ow has no fixed/max height, so nothing ever
   actually overflows vertically — using 'hidden' instead of 'visible' keeps
   that (no clipping, since there's nothing to clip) while stopping the
   browser from turning #ow into an unwanted scroll container. */
#ow{
  width:100%;
  max-width:100%;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  box-sizing:border-box;
  -webkit-overflow-scrolling:touch;
}
#ow > table.ot{
  width:max-content;
  min-width:100%;
  table-layout:auto;
}
#ow > table.ot > thead > tr > th{
  position:static !important;
  top:auto !important;
  right:auto !important;
  z-index:auto !important;
  box-shadow:none !important;
}
#ow > table.ot > thead > tr > th:last-child,
#ow > table.ot > tbody > tr:not(.ar-row) > td:last-child,
#ow > table.ot > tfoot > tr > td:last-child{
  position:static !important;
  right:auto !important;
  box-shadow:none !important;
}
/* New Order is a real table row at the bottom. Keep only its action cell
   visible while the user moves horizontally through the wide entry form. */
#ow > table.ot > tbody > tr.ar-row > td:last-child{
  position:sticky !important;
  right:0 !important;
  z-index:40 !important;
  background:#eff6ff !important;
  box-shadow:-5px 0 10px rgba(15,23,42,.14) !important;
  min-width:112px;
}
#ow > table.ot > tbody > tr.ar-row > td:last-child .acts{
  justify-content:center;
  flex-wrap:nowrap;
  white-space:nowrap;
}
#ow > table.ot > tbody > tr.ar-row > td:last-child .abt{
  flex:0 0 auto;
}

/* FINAL RESPONSIVE SAFETY: wide data tables stay inside the page width. */
.twrap{max-width:100%;box-sizing:border-box}
#ow{max-width:100vw}

.flow-vb{font-weight:700}.flow-vb:first-child{border-left:0}.flow-vb:hover{background:#e8f5e9;color:#166534}.flow-vb.on{background:#166534;color:#fff}
/* QUICK SIDE SORT — fixed Dispatch/Ready controls beside the order list */

/* SCREEN-FIT / NO PAGE CLIPPING
   Toolbars may wrap; only wide data tables scroll inside their own container. */
html,body{width:100%;max-width:100%;overflow-x:hidden}
main{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.pg{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
nav{width:100%;max-width:100%;box-sizing:border-box;overflow-x:auto;overflow-y:hidden}


/* MASTER ORDER HEADER — compact 2-line preferred auto-wrap.
   Keep existing controls/behavior; removed only Ascending, Descending,
   Dispatch Wise and Ready Wise from the visible toolbar. The remaining
   action group participates in the same flex row so it can fit beside
   the second filter row on normal desktop widths, and wraps naturally
   on smaller screens without horizontal page overflow. */
#pg-orders > div[style*="display:flex"]{
  flex-wrap:wrap !important;
  align-items:center !important;
  row-gap:6px !important;
  column-gap:8px !important;
}
#pg-orders > div[style*="display:flex"] > .mo-action-wrap{
  margin-left:0 !important;
  flex:1 1 auto;
  min-width:fit-content;
  max-width:100%;
  flex-wrap:wrap !important;
}
#pg-orders > div[style*="display:flex"] > .mo-action-wrap > .mo-sort-box{
  flex:0 0 auto;
}
#pg-orders > div[style*="display:flex"] > .mo-action-wrap > .vtgl{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  min-width:0;
}
@media (max-width:1100px){
  #pg-orders > div[style*="display:flex"] > .mo-action-wrap{
    flex-basis:100%;
  }
}

/* Filter + quick action rows must never enlarge the page width. */
#pg-orders > div[style*="display:flex"]{max-width:100%;box-sizing:border-box}
#qs-bar{max-width:100%;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;box-sizing:border-box;white-space:nowrap}
#qs-bar > *{max-width:100%;}
#qs-bar > span{flex-wrap:wrap}
#qs-bar .vtgl{flex-wrap:wrap}

/* Keep export/filter bars inside viewport. */
.xl-bar{max-width:100%;box-sizing:border-box}

/* Master Order table scrolls only inside its own area, never the whole page.
   overflow-y:hidden (not visible) here too — see the shake-fix comment above
   for why; #ow has no fixed height so nothing is ever clipped. */
#ow{width:100%;max-width:100%;min-width:0;overflow-x:auto!important;overflow-y:hidden!important;box-sizing:border-box}
#ow > table.ot{max-width:none}

/* At common laptop widths, tighten table spacing slightly so more columns remain visible. */
@media (min-width:1101px) and (max-width:1700px){
  table.ot thead th{padding:6px 7px;font-size:9.5px}
  table.ot tbody td{padding:5px 7px;font-size:11px}
  #qs-bar{gap:5px;padding:6px 10px}
  #qs-bar .qs-btn{padding:4px 9px}
}

/* Small laptop / tablet: allow controls to form multiple clean rows. */
@media (max-width:1100px){
  #qs-bar{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}
  #qs-bar > span{margin-left:0!important}
  table.ot thead th{padding:6px 6px;font-size:9px}
  table.ot tbody td{padding:5px 6px;font-size:10.5px}
}

/* Prevent common fixed-width inline elements from forcing viewport overflow. */
.inp,.sel,.msel,.msel-btn,.btn,.qs-btn,.vb{max-width:100%;box-sizing:border-box}


/* GROUPED VIEW SCREEN-FIT: Fac Wise / Art Wise / Ready Wise.
   Keep all columns, but use a compact table so the grouped pages fit common
   laptop screens without widening the whole document. Wide content can still
   scroll inside #ow only when absolutely necessary. */
#ow > table.ot.grouped-fit{width:100%;min-width:100%;table-layout:auto;font-size:11px}
#ow > table.ot.grouped-fit thead th{padding:5px 6px;font-size:9px;letter-spacing:.35px}
#ow > table.ot.grouped-fit tbody td{padding:4px 6px;font-size:10.5px}
#ow > table.ot.grouped-fit thead th[style*="min-width:26px"]{min-width:20px!important;width:20px;padding-left:2px;padding-right:2px;text-align:center}
#ow > table.ot.grouped-fit tbody td{max-width:180px}
#ow > table.ot.grouped-fit .badge{font-size:9px!important;padding:1px 5px!important}
#ow > table.ot.grouped-fit .dup-chip{font-size:9px}
@media (min-width:1101px) and (max-width:1700px){
  #ow > table.ot.grouped-fit thead th{padding:4px 5px;font-size:8.5px}
  #ow > table.ot.grouped-fit tbody td{padding:3px 5px;font-size:10px}
  #ow > table.ot.grouped-fit thead th[style*="min-width:26px"]{min-width:18px!important;width:18px;padding-left:1px;padding-right:1px}
}
@media (max-width:1100px){
  #ow > table.ot.grouped-fit{font-size:10px}
  #ow > table.ot.grouped-fit thead th{padding:4px 4px;font-size:8px}
  #ow > table.ot.grouped-fit tbody td{padding:3px 4px;font-size:9.5px}
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN - Professional Breakpoints (1920px, 1440px, 1366px)
   ═══════════════════════════════════════════════════════════════════════ */

/* 1920px - Ultra-wide displays */
@media (min-width:1920px){
  main{padding:18px 24px 24px 24px}
  .filter-card{padding:16px 18px}
  .filter-controls{gap:14px}
  .toolbar{gap:18px;margin-bottom:16px}
  table.ot thead th{padding:12px 14px;font-size:12px}
  table.ot tbody td{padding:11px 14px;font-size:13px}
  .btn,.sel,.inp{padding:9px 16px;font-size:13px}
  nav{padding:0 24px}
}

/* 1440px - Large displays */
@media (min-width:1440px) and (max-width:1919px){
  main{padding:16px 22px 22px 22px}
  .filter-card{padding:15px 17px}
  .toolbar{gap:16px;margin-bottom:15px}
  table.ot thead th{padding:11px 13px}
  table.ot tbody td{padding:10px 13px}
}

/* 1366px - Standard laptop */
@media (min-width:1200px) and (max-width:1439px){
  main{padding:16px 20px 20px 20px}
  .filter-controls{gap:11px;flex-wrap:wrap}
  .toolbar{gap:14px;flex-wrap:wrap}
  .toolbar-center{flex-wrap:wrap;width:100%;justify-content:center;order:3}
  table.ot{font-size:12px}
  table.ot thead th{padding:10px 11px;font-size:10px}
  table.ot tbody td{padding:9px 11px}
}

/* 1024px - Tablet landscape */
@media (max-width:1199px){
  .filter-controls{gap:8px;flex-wrap:wrap}
  .toolbar{gap:12px;flex-direction:column;align-items:flex-start}
  .toolbar-center{width:100%;justify-content:flex-start}
  .toolbar-right{width:100%;justify-content:flex-start;gap:8px}
  table.ot thead th{padding:9px 10px;font-size:9px}
  table.ot tbody td{padding:8px 10px;font-size:11px}
}

/* 768px - Tablet */
@media (max-width:768px){
  main{padding:14px 16px 16px 16px}
  .filter-card{padding:12px 14px;margin-bottom:12px}
  .filter-controls{gap:6px;flex-direction:column}
  .filter-search{flex:0 1 100%}
  .toolbar{gap:10px;flex-direction:column;margin-bottom:12px}
  .toolbar-left{font-size:12px}
  .toolbar-center{width:100%;flex-direction:column;gap:6px}
  .toolbar-right{width:100%;gap:6px}
  table.ot{font-size:11px}
  table.ot thead th{padding:8px 9px;font-size:9px}
  table.ot tbody td{padding:7px 9px}
  .btn,.sel,.inp{padding:7px 12px;font-size:12px}
}

/* 640px - Mobile landscape */
@media (max-width:640px){
  main{padding:12px}
  header{padding:10px 12px;gap:8px}
  nav{padding:0 12px;gap:0}
  .filter-card{padding:10px 12px;margin-bottom:10px}
  .filter-controls{gap:6px}
  .toolbar{gap:8px;margin-bottom:10px}
  table.ot{font-size:10px}
  table.ot thead th{padding:7px 8px;font-size:8px}
  table.ot tbody td{padding:6px 8px}
  .btn,.sel,.inp{padding:6px 10px;font-size:11px}
}

/* =====================================================================
   📅 DIN KA KAAM (Aaj Ka Kaam) — redesigned UI, 25-09-2026
   Scoped entirely under tw- classes (used only by today.js). Safe to
   add — does not touch any other section's styling.
   ===================================================================== */
.tw-ctrl{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--bd);flex-wrap:wrap}
.tw-seg{display:flex;border:1px solid var(--bd);border-radius:8px;overflow:hidden}
.tw-seg button{padding:5px 14px;font-size:11.5px;font-weight:700;background:var(--s1);color:var(--mu);border:none;cursor:pointer;border-right:1px solid var(--bd)}
.tw-seg button:last-child{border-right:none}
.tw-seg button:hover{color:var(--acc)}
.tw-seg button.on{background:var(--acc);color:#fff}
.tw-date-wrap{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--mu);font-weight:600}
.tw-date-wrap input{font-size:12px;padding:4px 7px;border:1px solid var(--bd);border-radius:6px;background:var(--s1);color:var(--tx)}
.tw-actions{display:flex;gap:8px;margin-left:auto}
.tw-actions .btn{padding:6px 13px;font-size:12px}

.tw-summary{padding:12px 16px;border-bottom:1px solid var(--bd)}
.tw-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.tw-card{background:var(--s2);border:1px solid var(--bd);border-left:3px solid var(--cc,var(--bd));border-radius:10px;padding:8px 11px;transition:box-shadow .15s,transform .1s}
.tw-card-click{cursor:pointer}
.tw-card-click:hover{box-shadow:0 3px 10px rgba(0,0,0,.10);transform:translateY(-1px)}
.tw-card-on{box-shadow:0 0 0 2px var(--cc,var(--acc)) inset}
.tw-card-lb{font-size:10px;color:var(--mu);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.tw-card-val{font-size:19px;font-weight:800;color:var(--cc,var(--tx));line-height:1.2;margin-top:1px}
.tw-card-sub{font-size:10.5px;color:var(--mu);margin-top:1px}

.tw-filters{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.tw-chip{font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;border:1px solid var(--bd);background:var(--s1);color:var(--mu);cursor:pointer;white-space:nowrap}
.tw-chip:hover{border-color:var(--acc);color:var(--acc)}
.tw-chip.on{background:var(--acc);border-color:var(--acc);color:#fff}

.tw-search{margin-top:9px}
.tw-search input{width:100%;padding:8px 12px;font-size:12.5px;border:1px solid var(--bd);border-radius:8px;background:var(--s1);color:var(--tx)}
.tw-search input:focus{outline:none;border-color:var(--acc)}

.tw-list{padding:12px 16px 16px}
.tw-sec{margin-bottom:14px}
.tw-sec:last-child{margin-bottom:0}
.tw-sec-hd{font-weight:700;font-size:12.5px;margin-bottom:6px;display:flex;align-items:center;gap:5px}
.tw-sec-hd .cnt{color:var(--mu);font-weight:600}
.tw-sec-box{border:1px solid var(--bd);border-radius:10px;overflow:hidden}

.tw-orow{display:flex;align-items:center;gap:12px;padding:9px 12px;border-bottom:1px solid var(--bd);font-size:12.5px}
.tw-orow:last-child{border-bottom:none}
.tw-orow:hover{background:var(--s2)}
.tw-orow-no{font-weight:800;color:var(--acc);min-width:48px;font-family:'DM Mono',monospace;font-size:12.5px}
.tw-orow-mid{flex:1;min-width:0}
.tw-orow-party{font-weight:700;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-orow-meta{font-size:11px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-orow-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;white-space:nowrap;flex-shrink:0}
.tw-orow-fac{font-size:10.5px;color:var(--mu);font-weight:700}
.tw-orow-time{font-size:10px;color:var(--mu)}
.tw-badge{font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px;white-space:nowrap}

.tw-line{display:flex;justify-content:space-between;gap:10px;padding:7px 12px;border-bottom:1px solid var(--bd);font-size:12px}
.tw-line:last-child{border-bottom:none}
.tw-line:hover{background:var(--s2)}
.tw-line .r{color:var(--mu);font-size:11px;white-space:nowrap}

.tw-empty{margin-top:6px;text-align:center;color:var(--mu);font-size:12.5px;padding:26px;border:1px dashed var(--bd);border-radius:10px}

@media (max-width:640px){
  .tw-box{width:98vw !important;max-height:94vh !important}
  .tw-ctrl{padding:9px 12px}
  .tw-actions{width:100%;margin-left:0}
  .tw-actions .btn{flex:1}
  .tw-summary{padding:10px 12px}
  .tw-cards{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
  .tw-list{padding:10px 12px 14px}
  .tw-orow{flex-wrap:wrap;gap:6px}
  .tw-orow-right{align-items:flex-start;flex-direction:row;gap:8px;width:100%;order:3}
}


/* ============================================================
   DASHBOARD PRO UI — 2026 polish layer
   Visual-only refinement: existing data/actions remain unchanged.
   ============================================================ */
main{max-width:1800px;margin:0 auto;padding:18px 24px 28px}
nav{top:52px;box-shadow:0 1px 0 rgba(15,23,42,.03),0 6px 18px -16px rgba(15,23,42,.24)}
.top-nav{min-height:48px}
#pg-dash{max-width:100%}

.pro-command-bar{
  position:relative;
  gap:10px 14px;
  padding:12px 14px;
  margin-bottom:12px;
  border-radius:16px;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 30px -24px rgba(15,23,42,.24);
}
.pro-command-title{
  flex:0 1 auto;
  min-width:210px;
  margin-right:4px;
  align-items:center;
  font-size:14px;
}
.pro-command-title span{font-size:11px}
.pro-actions{flex:0 1 auto}
.pro-action{padding:7px 11px;border-radius:9px}
.pro-global-search{min-width:220px;max-width:330px;padding:7px 10px;border-radius:9px}

.pro-status-strip{gap:9px;margin-bottom:14px}
.pro-status-strip>div{
  min-height:58px;
  padding:10px 13px;
  border-radius:11px;
  background:linear-gradient(180deg,#fff,#f8fafc);
}

.dash-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:4px 2px 14px;
}
.dash-hero-copy{min-width:0}
.dash-eyebrow{
  display:block;
  margin-bottom:3px;
  color:#64748b;
  font-size:9px;
  line-height:1.2;
  letter-spacing:1.3px;
  font-weight:800;
}
.dash-hero h1{
  margin:0;
  color:#0f172a;
  font-size:22px;
  line-height:1.15;
  letter-spacing:-.45px;
  font-weight:800;
}
.dash-hero p{
  margin:4px 0 0;
  color:#64748b;
  font-size:11.5px;
}
.dash-hero-meta{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid #dbe3ee;
  border-radius:999px;
  background:#fff;
  color:#64748b;
  font-size:10.5px;
  font-weight:600;
}
.dash-live-dot{
  width:7px;height:7px;border-radius:50%;
  background:#16a34a;
  box-shadow:0 0 0 3px rgba(22,163,74,.12);
}

.scards{
  grid-template-columns:repeat(6,minmax(145px,1fr));
  gap:10px;
  margin-bottom:16px;
}
.sc{
  min-height:116px;
  border-radius:13px;
  padding:14px 14px 12px 16px;
}
.sc-v{font-size:28px}
.sc-ic{width:30px;height:30px;border-radius:8px}
.sc-lb{font-size:9.5px;margin-bottom:7px}
.sc-s{font-size:10.5px}

.dash-alerts{gap:9px;margin-bottom:14px}
.dalert{border-radius:11px;padding:11px 13px}

.dcharts,.dc-par-row{
  gap:12px;
  margin-bottom:14px;
}
.stbl{
  border-radius:13px;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 26px -20px rgba(15,23,42,.18);
}
.stbl-hd{padding:11px 14px;font-size:14px}
.dchart-body{min-height:185px;padding:8px 12px 12px}
.dc-parbars{padding:7px 10px 10px}
.dc-prow{padding:5px 7px}
.dc-ptrack{height:14px}

.sgrid{
  gap:12px;
  margin-bottom:14px;
}
.sgrid .stbl{min-width:0}
.stbl th{padding:7px 9px;font-size:9.5px}
.stbl td{padding:7px 9px;font-size:11.5px}

@media(max-width:1500px){
  .scards{grid-template-columns:repeat(3,minmax(160px,1fr))}
}
@media(max-width:1050px){
  main{padding:15px 16px 24px}
  .pro-command-title{flex:1 1 100%;min-width:0}
  .pro-actions{order:2}
  .pro-global-search{order:3;flex:1 1 240px;max-width:none;margin-left:0}
  .scards{grid-template-columns:repeat(2,minmax(150px,1fr))}
}
@media(max-width:640px){
  main{padding:12px 10px 20px}
  .dash-hero{align-items:flex-start;flex-direction:column;padding-bottom:12px}
  .dash-hero h1{font-size:20px}
  .dash-hero-meta{font-size:10px}
  .pro-command-bar{padding:10px;border-radius:13px}
  .pro-actions{width:100%;display:grid;grid-template-columns:repeat(2,1fr)}
  .pro-action{justify-content:center;padding:8px 7px}
  .pro-global-search{flex-basis:100%}
  .pro-status-strip{display:grid;grid-template-columns:1fr 1fr}
  .pro-status-strip>div{min-width:0}
  .scards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .sc{min-height:108px;padding:12px}
  .sc-v{font-size:25px}
}
@media(max-width:390px){
  .scards{grid-template-columns:1fr}
  .pro-status-strip{grid-template-columns:1fr}
}

/* ============================================================
   CONTROL TOWER REDESIGN — strong visual overhaul
   ============================================================ */
body{background:#f3f6fb;color:#172033}
header{background:#0b1220;border-bottom:1px solid #1e293b;height:58px;padding:0 24px}
header .logo{font-size:21px;letter-spacing:.2px}
header .hst{color:#a8b4c7}
.top-nav{top:58px;background:#fff;border-bottom:1px solid #dce3ee;box-shadow:0 5px 18px rgba(15,23,42,.06);padding:0 24px;min-height:52px}
.top-nav .tab{height:52px;font-weight:700;color:#536176}
.top-nav .tab.on{color:#0b63ce;border-bottom:3px solid #0b63ce;background:#f6faff}
main{max-width:1920px;padding:24px 28px 42px}
#pg-dash{background:transparent}

/* hero becomes the visual anchor */
#pg-dash>.pro-command-bar{background:#0b1629;border:0;border-radius:18px;padding:18px 20px;box-shadow:0 14px 36px rgba(11,22,41,.18);color:#fff;margin-bottom:14px}
#pg-dash .pro-command-title{color:#fff;font-size:15px}
#pg-dash .pro-command-title b{color:#fff;font-size:16px}
#pg-dash .pro-command-title span{color:#8ea0b9}
#pg-dash .pro-actions{gap:7px}
#pg-dash .pro-action{border:1px solid #33445e;background:#17253a;color:#dbe7f7;border-radius:10px;padding:9px 12px;box-shadow:none}
#pg-dash .pro-action:hover{background:#22334d;border-color:#4a6386;transform:translateY(-1px)}
#pg-dash .pro-action.primary{background:#1677e8;border-color:#1677e8;color:#fff}
#pg-dash .pro-global-search{background:#111f34;border:1px solid #34455f;color:#fff;max-width:330px}
#pg-dash .pro-global-search input{color:#fff}
#pg-dash .pro-global-search input::placeholder{color:#7f90a8}
#pg-dash .pro-global-search kbd{background:#263751;border-color:#3a4b65;color:#aebbd0}

#pg-dash>.pro-status-strip{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:10px;margin-bottom:18px}
#pg-dash .pro-status-strip>div{min-height:64px;background:#fff;border:1px solid #e0e7f0;border-radius:13px;padding:11px 15px;box-shadow:0 4px 14px rgba(15,23,42,.04)}
#pg-dash .pro-status-strip>div:first-child{border-left:4px solid #16a34a}
#pg-dash .pro-status-strip b{font-size:13px;color:#172033}
#pg-dash .pro-status-strip small{color:#7a879a}

#pg-dash>.dash-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#eef6ff 0%,#fff 58%,#f1f8ff 100%);border:1px solid #dce8f6;border-radius:18px;padding:22px 24px;margin-bottom:14px;box-shadow:0 7px 22px rgba(30,64,110,.07)}
#pg-dash>.dash-hero:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-90px;top:-130px;background:rgba(30,119,232,.08)}
#pg-dash .dash-eyebrow{color:#1677e8;font-size:10px;letter-spacing:1.7px}
#pg-dash .dash-hero h1{font-size:30px;letter-spacing:-.8px;color:#0f172a}
#pg-dash .dash-hero p{font-size:12.5px;color:#617089}
#pg-dash .dash-hero-meta{position:relative;z-index:1;background:#fff;border-color:#d8e4f2;color:#52627a;padding:9px 13px}

#pg-dash>.scards{grid-template-columns:repeat(6,minmax(150px,1fr));gap:12px;margin-bottom:18px}
#pg-dash .sc{position:relative;overflow:hidden;min-height:132px;border:1px solid #dce4ef;border-radius:15px;background:#fff;padding:16px 16px 14px;box-shadow:0 7px 20px rgba(15,23,42,.055);transition:.18s}
#pg-dash .sc:hover{transform:translateY(-3px);box-shadow:0 13px 28px rgba(15,23,42,.1);border-color:#c7d5e7}
#pg-dash .sc:after{content:"";position:absolute;right:-24px;bottom:-36px;width:100px;height:100px;border-radius:50%;background:rgba(22,119,232,.045)}
#pg-dash .sc-lb{font-size:10px;letter-spacing:.5px;color:#718096;font-weight:800}
#pg-dash .sc-v{font-size:31px;color:#101828;margin-top:3px}
#pg-dash .sc-s{color:#7b8799}
#pg-dash .sc-ic{width:34px;height:34px;border-radius:10px;position:absolute;right:14px;top:13px}

#pg-dash>.dcharts,#pg-dash>.dc-par-row,#pg-dash>.sgrid{gap:14px;margin-bottom:14px}
#pg-dash .stbl{background:#fff;border:1px solid #dde5ef;border-radius:15px;box-shadow:0 6px 20px rgba(15,23,42,.045);overflow:hidden}
#pg-dash .stbl-hd{background:#fbfcfe;border-bottom:1px solid #e4eaf2;padding:13px 15px;font-size:13px;font-weight:800;color:#263449}
#pg-dash .dchart-body{min-height:205px;padding:10px 14px 14px}
#pg-dash .dc-parbars{padding:9px 12px 12px}
#pg-dash .dc-prow{padding:6px 8px;border-radius:8px}
#pg-dash .dc-prow:hover{background:#f6f9fd}
#pg-dash .stbl table{background:#fff}
#pg-dash .stbl th{background:#f7f9fc;color:#68768b;border-bottom:1px solid #e2e8f0;font-size:9px;letter-spacing:.35px;text-transform:uppercase;padding:9px 10px}
#pg-dash .stbl td{border-bottom:1px solid #edf1f6;color:#344054;padding:8px 10px}
#pg-dash .stbl tbody tr:hover{background:#f8fbff}

/* stronger section labels */
#pg-dash>.sgrid>.stbl:first-child .stbl-hd:before{content:"01";margin-right:9px;color:#1677e8;font-size:9px}
#pg-dash>.sgrid>.stbl:nth-child(2) .stbl-hd:before{content:"02";margin-right:9px;color:#1677e8;font-size:9px}

@media(max-width:1450px){#pg-dash>.scards{grid-template-columns:repeat(3,minmax(170px,1fr))}}
@media(max-width:1000px){main{padding:18px 16px 32px}#pg-dash>.pro-status-strip{grid-template-columns:repeat(2,1fr)}#pg-dash>.scards{grid-template-columns:repeat(2,minmax(150px,1fr))}.pro-command-title{flex:1 1 100%}.pro-global-search{max-width:none;flex:1}}
@media(max-width:650px){header{height:52px;padding:0 14px}.top-nav{top:52px;padding:0 10px}.top-nav .tab{height:48px}main{padding:12px 9px 24px}#pg-dash>.pro-status-strip{grid-template-columns:1fr 1fr}#pg-dash>.scards{grid-template-columns:1fr 1fr;gap:8px}#pg-dash .sc{min-height:112px;padding:13px}#pg-dash .sc-v{font-size:26px}#pg-dash>.dash-hero{padding:18px}#pg-dash .dash-hero h1{font-size:23px}#pg-dash>.pro-command-bar{padding:13px;border-radius:14px}#pg-dash .pro-actions{display:grid;grid-template-columns:repeat(2,1fr);width:100%}#pg-dash .pro-action{justify-content:center}}
@media(max-width:390px){#pg-dash>.scards{grid-template-columns:1fr}#pg-dash>.pro-status-strip{grid-template-columns:1fr}}

/* ===== DASHBOARD COMPACT / LOW-SCROLL MODE ===== */
#pg-dash{--dash-gap:10px}
#pg-dash>.pro-command-bar{padding:9px 12px;margin-bottom:9px;border-radius:12px;gap:7px 10px}
#pg-dash .pro-command-title{flex:0 0 auto;width:auto;min-width:190px;font-size:13px}
#pg-dash .pro-command-title b{font-size:14px}
#pg-dash .pro-command-title span{font-size:10px}
#pg-dash .pro-actions{gap:5px}
#pg-dash .pro-action{min-height:31px;padding:5px 9px;font-size:10px;border-radius:7px}
#pg-dash .pro-global-search{height:31px;max-width:260px;margin-left:auto}
#pg-dash>.pro-status-strip{padding:6px 10px;margin-bottom:9px;border-radius:10px;gap:6px;grid-template-columns:repeat(4,1fr)}
#pg-dash>.pro-status-strip>div{padding:4px 7px;min-height:28px}
#pg-dash>.pro-status-strip b{font-size:10px}
#pg-dash>.pro-status-strip small{font-size:8px}
#pg-dash>.dash-hero{padding:12px 16px;margin-bottom:9px;border-radius:12px;min-height:58px;display:flex;align-items:center}
#pg-dash .dash-eyebrow{font-size:8px;letter-spacing:1px}
#pg-dash .dash-hero h1{font-size:20px;margin:2px 0}
#pg-dash .dash-hero p{font-size:10px;margin:0}
#pg-dash .dash-hero-meta{padding:6px 9px;font-size:9px}
#pg-dash>.scards{gap:8px;margin-bottom:9px;grid-template-columns:repeat(7,minmax(105px,1fr))}
#pg-dash .sc{min-height:86px;padding:9px 10px;border-radius:11px}
#pg-dash .sc-ic{font-size:14px}
#pg-dash .sc-lb{font-size:9px;margin-top:3px}
#pg-dash .sc-v{font-size:22px;line-height:1.05;margin-top:3px}
#pg-dash .sc-s{font-size:8px;margin-top:2px}
#pg-dash>.dcharts,#pg-dash>.dc-par-row,#pg-dash>.sgrid{gap:10px;margin-bottom:10px}
#pg-dash .stbl{border-radius:11px}
#pg-dash .stbl-hd{padding:8px 10px;font-size:11px}
#pg-dash .stbl th{padding:6px 8px;font-size:8px}
#pg-dash .stbl td{padding:6px 8px;font-size:10px}
#pg-dash .dc-parbars{padding:5px 8px 7px}
#pg-dash .dc-prow{padding:4px 6px}
#pg-dash .dc-ptrack{height:11px}
#pg-dash .dc-pnm{font-size:10px}
#pg-dash .dc-pval{font-size:9px}
#pg-dash .dc-pval small{font-size:8px}
.dash-table-head{display:flex!important;align-items:center;justify-content:space-between;gap:7px}
.dash-viewall{border:1px solid #cbd5e1;background:#f8fafc;color:#2563eb;border-radius:6px;padding:3px 8px;font-size:9px;font-weight:800;cursor:pointer;white-space:nowrap}
.dash-viewall:hover{background:#eff6ff;border-color:#93c5fd}
#pg-dash tbody.dash-limited tr:nth-child(n+7):not(:last-child){display:none}
#pg-dash tbody.dash-limited tr:last-child{display:table-row}
#pg-dash .dash-table-card .stbl-hd{min-height:32px}
@media(max-width:1200px){#pg-dash>.scards{grid-template-columns:repeat(4,minmax(120px,1fr))}}
@media(max-width:760px){#pg-dash>.pro-command-bar{display:grid;grid-template-columns:1fr;gap:7px}#pg-dash .pro-command-title{width:100%}#pg-dash .pro-actions{display:grid;grid-template-columns:repeat(4,1fr)}#pg-dash .pro-global-search{max-width:none;width:100%}#pg-dash>.pro-status-strip{grid-template-columns:repeat(2,1fr)}#pg-dash>.scards{grid-template-columns:repeat(2,1fr)}#pg-dash>.dash-hero{padding:11px 13px}}

/* FINAL FIX — NORMAL TABLE VIEW SCREEN FIT (27-09-2026)
   On Full-HD/large desktop screens the flat Master Order table could become
   slightly wider than the viewport, leaving the right-side Actions buttons
   clipped. Keep the normal table compact while preserving every column and
   all existing horizontal-scroll safety for narrower screens.
*/
@media (min-width:1701px) and (max-width:2300px){
  #ow > table.ot:not(.grouped-fit){
    min-width:100%;
    width:100%;
  }
  #ow > table.ot:not(.grouped-fit) thead th{
    padding:7px 8px;
    font-size:10px;
    letter-spacing:.25px;
  }
  #ow > table.ot:not(.grouped-fit) tbody td{
    padding:7px 8px;
    font-size:11px;
  }
  #ow > table.ot:not(.grouped-fit) .acts{
    gap:3px;
    white-space:nowrap;
  }
  #ow > table.ot:not(.grouped-fit) .abt{
    padding:0 5px;
  }
}

/* Keep the action column usable when the browser is a little narrower. */
@media (min-width:1301px) and (max-width:1700px){
  #ow > table.ot:not(.grouped-fit){
    width:100%;
    min-width:100%;
    max-width:100%;
  }
  #ow > table.ot:not(.grouped-fit) thead th{padding:5px 6px;font-size:9px}
  #ow > table.ot:not(.grouped-fit) tbody td{padding:5px 6px;font-size:10.5px}
  #ow > table.ot:not(.grouped-fit) .acts{gap:2px}
  #ow > table.ot:not(.grouped-fit) .abt{padding:0 4px}
}
/* Aaj Ka Kaam — compact party/factory/article filters */
.tw-filter-row{display:flex;gap:7px;align-items:center;margin-top:9px;flex-wrap:wrap}
.tw-filter-row select{font-size:11.5px;padding:7px 9px;border:1px solid var(--bd);border-radius:8px;background:var(--s1);color:var(--tx);min-width:120px}
.tw-filter-row .tw-search{flex:1;min-width:230px;margin-top:0}
@media(max-width:700px){.tw-filter-row select{flex:1;min-width:0}.tw-filter-row .tw-search{width:100%;flex-basis:100%}}

/* NEW ORDER PAGE: entry line ko screen ke neeche pin karne ke liye #ow ko scroll-container nahi rehna chahiye */
#ow.np{overflow:visible!important}

/* New Order row: khaali zaroori field */
.ar-inp.ar-err{border:2px solid #dc2626!important;background:#fee2e2!important;box-shadow:0 0 0 2px rgba(220,38,38,.25)!important}

/* 🆕 Direct Material edit in Master Order */
.material-direct-cell{cursor:pointer;position:relative;min-width:72px;transition:background .12s ease}
.material-direct-cell:hover{background:rgba(245,166,35,.16)!important;box-shadow:inset 0 0 0 1px rgba(245,166,35,.45)}
.inline-material-value{display:inline-flex;align-items:center;gap:4px;min-height:18px;max-width:100%;white-space:nowrap}
.inline-edit-hint{font-size:9px;opacity:.45}
.material-direct-cell:hover .inline-edit-hint{opacity:1;color:var(--acc)}
.inline-material-select{width:100%;min-width:72px;max-width:130px;padding:2px 3px;border:1px solid var(--acc);border-radius:4px;background:var(--bg);color:var(--tx);font:700 10px/1.2 inherit;outline:none}

/* Hold Orders uses a normal page table; keep its header in document flow. */
#pg-hold table.ot thead th{position:static;top:auto;z-index:auto}


/* Staff work marker */
.staff-work-mark{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:5px;padding:0 4px;border-radius:4px;background:#2563eb;color:#fff;font:800 10px/18px Inter,sans-serif;vertical-align:middle;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.lifecycle-date{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;font-size:10px;line-height:1.15;}
.lifecycle-label{font-size:9px;color:var(--mu);}
.lifecycle-value{font-family:'DM Mono',monospace;font-weight:800;color:var(--tx);}
.lifecycle-date.staff-lifecycle-red{background:#fee2e2 !important;border:1px solid #dc2626 !important;border-radius:4px;padding:2px 4px;}
.lifecycle-label.staff-lifecycle-red,.lifecycle-value.staff-lifecycle-red{color:#dc2626 !important;}


.tw-orow-time.staff-tw-lifecycle-red{color:#dc2626 !important;background:#fee2e2 !important;border:1px solid #dc2626 !important;border-radius:4px;padding:2px 4px;font-weight:800;}