:root{
/* ---- Shopify Polaris-inspired tokens ---- */
--navy:#303030; --navy2:#1a1a1a; --ink:#303030; --muted:#616161; --muted2:#8a8a8a;
--pink:#303030; --pink2:#4a4a4a; --pink-dark:#303030; --pink-deep:#1a1a1a;
--bg:#f1f1f1;
--card:#ffffff; --line:#e3e3e3; --line2:#ebebeb;
--green:#0c5132; --green-dk:#0a4327;
--amber:#8a6116; --red:#8e1f0b; --blue:#00527c;
--accent:#005bd3; /* Polaris focus / link blue */
--topnav:#1a1a1a; /* global dark bar */
--topnav-field:#303030;
--radius:12px; --radius-sm:8px; --radius-lg:16px;
--shadow-xs:0 1px 0 rgba(0,0,0,.05);
--shadow:0 1px 0 rgba(0,0,0,.05);
--shadow-md:0 4px 12px rgba(0,0,0,.10);
--shadow-lg:0 26px 80px rgba(0,0,0,.22);
--shadow-glow:0 0 0 3px rgba(0,91,211,.25);
--btn-shadow:0 -1px 0 0 #b5b5b5 inset, 0 0 0 1px rgba(0,0,0,.10) inset, 0 .5px 0 1.5px #fff inset;
--btn-shadow-dark:0 -1px 0 0 #000 inset, 0 0 0 1px rgba(255,255,255,.10) inset, 0 .5px 0 1.5px rgba(255,255,255,.22) inset;
--grad:#303030;
--grad-deep:#1a1a1a;
--grad-navy:#f1f1f1;
--grad-mesh:none;
--ease:cubic-bezier(.22,.9,.32,1.16);
--ease-soft:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"San Francisco","Segoe UI",Roboto,"Helvetica Neue",sans-serif; background:var(--bg); color:var(--ink); font-size:13px; line-height:1.45; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; letter-spacing:normal}
body::before{content:none}
button{font-family:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-radius:6px}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important; transition-duration:.01ms!important}}
input,select,textarea{font-family:inherit; font-size:13px; color:var(--ink)}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-thumb{background:#dedede; border-radius:20px; border:2.5px solid transparent; background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#adadad; background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
/* ================= GLOBAL DARK TOP BAR (Shopify admin) ================= */
.globalbar{position:sticky; top:0; z-index:50; background:var(--topnav); height:56px; display:flex; align-items:center; gap:16px; padding:0 12px 0 16px}
.globalbar .gb-brand{display:flex; align-items:center; gap:9px; color:#e3e3e3; font-size:13.5px; font-weight:650; white-space:nowrap}
.globalbar .gb-brand .gb-mark{width:26px; height:26px; border-radius:7px; background:#1a1a1a; border:1px solid #4a4a4a; display:flex; align-items:center; justify-content:center; font-size:14px}
.globalbar .gb-search{flex:1; max-width:520px; margin:0 auto; position:relative}
.globalbar .gb-field{display:flex; align-items:center; min-height:32px; border-radius:8px; background:var(--topnav-field); border:1px solid #616161; padding:0 8px 0 34px; gap:6px; transition:.15s}
.globalbar .gb-field:hover{background:#3a3a3a}
.globalbar .gb-field:focus-within{background:#3a3a3a; border-color:#8a8a8a; box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.globalbar .gb-search input{flex:1; min-width:0; width:auto; height:30px; border:none; border-radius:0; background:transparent; color:#e3e3e3; padding:0 4px 0 0; font-size:13px; outline:none; box-shadow:none}
.globalbar .gb-search input::placeholder{color:#b5b5b5}
.globalbar .gb-search input:hover,.globalbar .gb-search input:focus{background:transparent; border:none; box-shadow:none}
.globalbar .gb-field:focus-within .gb-kbd{opacity:0; pointer-events:none}
.gb-chip{display:inline-flex; align-items:center; gap:2px; height:22px; padding:0 2px 0 8px; border-radius:6px; background:#4a4a4a; color:#f1f1f1; font-size:12px; font-weight:650; flex:none; white-space:nowrap}
.gb-chip .gb-chip-x{border:none; background:transparent; color:#dedede; width:18px; height:18px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; line-height:1}
.gb-chip .gb-chip-x:hover{background:#616161; color:#fff}
.gb-pop{display:none; position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); width:min(560px,94vw); max-height:min(72vh,560px); overflow:auto; background:#fff; color:var(--ink); border-radius:12px; box-shadow:0 18px 48px rgba(0,0,0,.32); z-index:80; padding:6px}
.gb-pop.show{display:block; animation:drop .12s var(--ease-soft)}
.gb-sec{font-size:11.5px; font-weight:650; color:var(--muted); padding:8px 10px 4px}
.gb-row{display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left; border:none; background:transparent; padding:8px 10px; border-radius:8px; cursor:pointer; color:inherit; font:inherit}
.gb-row:hover,.gb-row.on{background:#f1f1f1}
.gb-row .gb-ico{width:28px; height:28px; border-radius:8px; background:#f1f1f1; color:#4a4a4a; display:flex; align-items:center; justify-content:center; flex:none}
.gb-row.on .gb-ico,.gb-row:hover .gb-ico{background:#e3e3e3}
.gb-row .gb-body{min-width:0; flex:1}
.gb-row .gb-t{font-size:13px; font-weight:650; display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.gb-row .gb-s{font-size:12px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gb-more{width:100%; border:none; background:none; padding:10px; font-size:13px; font-weight:650; color:var(--accent); cursor:pointer; border-radius:8px; font-family:inherit}
.gb-more:hover,.gb-more.on{background:#f1f6fd}
.gb-empty{padding:22px 14px; text-align:center; color:var(--muted); font-size:13px}
.globalbar .gb-search::before{content:""; position:absolute; left:11px; top:9px; width:14px; height:14px; opacity:.7;
background:currentColor; color:#b5b5b5;
-webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='5'/%3E%3Cpath d='M12.8 12.8 16.5 16.5'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='5'/%3E%3Cpath d='M12.8 12.8 16.5 16.5'/%3E%3C/svg%3E") center/contain no-repeat}
.globalbar .gb-kbd{position:absolute; right:8px; top:7px; height:18px; padding:0 6px; border-radius:5px; background:#4a4a4a; color:#b5b5b5; font-size:10.5px; font-family:inherit; font-weight:600; display:flex; align-items:center; letter-spacing:.2px; pointer-events:none}
.globalbar .gb-right{display:flex; align-items:center; gap:6px; margin-left:auto}
.globalbar .gb-btn{width:32px; height:32px; border-radius:8px; border:none; background:transparent; color:#e3e3e3; font-size:14px; display:flex; align-items:center; justify-content:center; transition:.14s}
.jwr-items-table{table-layout:fixed;width:100%}
.jwr-items-table th,.jwr-items-table td{vertical-align:middle}
.jwr-items-table th:nth-child(1),.jwr-items-table td:nth-child(1){width:52px}
.jwr-items-table th:nth-child(2),.jwr-items-table td:nth-child(2){width:22%}
.jwr-items-table th:nth-child(3),.jwr-items-table td:nth-child(3),
.jwr-items-table th:nth-child(4),.jwr-items-table td:nth-child(4){width:110px;text-align:center}
.jwr-items-table th:nth-child(5),.jwr-items-table td:nth-child(5),
.jwr-items-table th:nth-child(6),.jwr-items-table td:nth-child(6),
.jwr-items-table th:nth-child(7),.jwr-items-table td:nth-child(7){width:112px;text-align:center}
.jwr-items-table th:nth-child(8),.jwr-items-table td:nth-child(8){width:96px;text-align:center}
.jwr-items-table th:nth-child(9),.jwr-items-table td:nth-child(9){width:150px}
.jwr-items-table th:nth-child(10),.jwr-items-table td:nth-child(10){width:44px}
.jwr-items-table td:nth-child(5) .inp,
.jwr-items-table td:nth-child(6) .inp,
.jwr-items-table td:nth-child(8) .inp{width:100%;max-width:100%}
.open-stock-table{table-layout:fixed;width:100%}
.open-stock-table th,.open-stock-table td{vertical-align:middle}
.open-stock-table th:nth-child(1),.open-stock-table td:nth-child(1){width:56px}
.open-stock-table th:nth-child(2),.open-stock-table td:nth-child(2){width:18%}
.open-stock-table th:nth-child(3),.open-stock-table td:nth-child(3){width:26%}
.open-stock-table th:nth-child(4),.open-stock-table td:nth-child(4),
.open-stock-table th:nth-child(5),.open-stock-table td:nth-child(5),
.open-stock-table th:nth-child(6),.open-stock-table td:nth-child(6){width:120px;text-align:center}
.open-stock-table th:nth-child(7),.open-stock-table td:nth-child(7){width:100px;text-align:center}
.open-stock-table th:nth-child(8),.open-stock-table td:nth-child(8){width:44px}
.open-stock-table td:nth-child(4) .inp,
.open-stock-table td:nth-child(5) .inp,
.open-stock-table td:nth-child(7) .inp{width:100%;max-width:100%}
.globalbar .gb-btn{position:relative}
.globalbar .gb-btn:hover{background:#303030}
.globalbar .gb-btn .gb-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:#dc2626;color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center}
.qa-notif-item .qa-notif-meta{font-size:11px;color:#6b7280;margin-top:2px}
.qa-notif-item .qa-notif-type{font-weight:600;font-size:13px;color:#111827}
.globalbar .gb-avatar{display:flex; align-items:center; gap:8px; height:32px; padding:0 8px 0 4px; border-radius:8px; background:#303030; color:#e3e3e3; font-size:12.5px; font-weight:600; border:none; transition:.14s}
.globalbar .gb-avatar:hover{background:#3f3f3f}
.globalbar .gb-avatar .av{width:24px; height:24px; border-radius:6px; background:#36fba1; color:#0c5132; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700}
@media(max-width:920px){.globalbar .gb-brand span{display:none} .globalbar{padding:0 8px}}
/* ===== hamburger ===== */
.gb-burger{width:32px; height:32px; border-radius:8px; border:none; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; flex:none; transition:background .14s}
.gb-burger:hover{background:#303030}
.gb-burger span{display:block; width:16px; height:1.8px; border-radius:2px; background:#e3e3e3; transition:transform .22s var(--ease-soft), opacity .18s}
body.nav-collapsed .gb-burger span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
body.nav-collapsed .gb-burger span:nth-child(2){opacity:0}
body.nav-collapsed .gb-burger span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}
/* The toggle now lives in the sidebar brand row (assets/js/nav-toggle.js),
so the copy in the black global bar is hidden by default — no flash before
the script runs — and is only revealed on a page with no sidebar. */
.globalbar .gb-burger{display:none!important}
body.no-sidebar-toggle .globalbar .gb-burger{display:flex!important}
body.nav-sidebar-toggle .globalbar .gb-burger{display:none!important}
/* ===== sidebar hamburger (brand row) ===== */
.brand .sidebar-burger{position:absolute; top:50%; right:6px; transform:translateY(-50%);
width:30px; height:30px; border-radius:8px; border:1px solid transparent; background:transparent;
display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
padding:0; cursor:pointer; flex:none; transition:background .15s var(--ease-soft), border-color .15s var(--ease-soft)}
.brand .sidebar-burger:hover{background:#e3e3e3; border-color:#d5d5d5}
.brand .sidebar-burger:focus-visible{outline:2px solid #2563eb; outline-offset:2px}
.brand .sidebar-burger span{display:block; width:15px; height:1.8px; border-radius:2px; background:#4a4a4a; transition:transform .22s var(--ease-soft), opacity .18s}
body.nav-collapsed .brand .sidebar-burger span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
body.nav-collapsed .brand .sidebar-burger span:nth-child(2){opacity:0}
body.nav-collapsed .brand .sidebar-burger span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}
/* ===== collapsed rail (desktop): icons only, labels on hover ===== */
.sidebar{transition:width .2s var(--ease-soft), min-width .2s var(--ease-soft), transform .22s var(--ease-soft)}
body.nav-collapsed .sidebar{width:72px; min-width:72px; padding-left:6px; padding-right:6px; overflow:visible}
body.nav-collapsed .brand{padding:8px 0 10px}
body.nav-collapsed .brand .logo{display:none}
body.nav-collapsed .brand .sidebar-burger{position:static; transform:none; margin:0 auto}
body.nav-collapsed .nav .nav-sec{height:1px; min-height:0; margin:10px 8px 8px; padding:0; background:#dcdcdc; color:transparent; font-size:0; line-height:0; overflow:hidden}
body.nav-collapsed .nav .nav-sec:first-child{display:none}
body.nav-collapsed .nav-item{justify-content:center; padding:8px 0; gap:0; min-height:38px}
body.nav-collapsed .nav-item .nl,
body.nav-collapsed .nav-item .cnt{display:none}
body.nav-collapsed .nav-item.active::before{left:-6px}
body.nav-collapsed .side-foot{padding:12px 0 16px; text-align:center; font-size:0}
body.nav-collapsed .side-foot .dot{margin:0}
body.nav-collapsed .side-foot .sf-sub{display:none}
/* ===== mobile drawer ===== */
.nav-scrim{display:none; position:fixed; inset:56px 0 0; background:rgba(0,0,0,.45); z-index:29; animation:overlayIn .16s var(--ease-soft)}
.app{display:flex; min-height:calc(100vh - 56px); position:relative; z-index:1; align-items:flex-start}
/* ================= SIDEBAR (light Polaris nav) ================= */
.sidebar{width:232px; min-width:232px; background:var(--bg); color:var(--ink); display:flex; flex-direction:column; position:sticky; top:56px; height:calc(100vh - 56px); z-index:30; overflow:hidden; padding:8px 8px 0; border-right:1px solid transparent}
.sidebar::after{content:none}
.brand{padding:8px 8px 10px; border-bottom:none; position:relative}
.brand .logo{display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:8px; transition:.14s}
.brand .logo:hover{background:#e3e3e3}
.brand .logo .mark{width:30px;height:30px;border-radius:8px;background:#303030;display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;flex-shrink:0;box-shadow:none; position:relative}
.brand .logo .mark::after{content:none}
.brand h1{font-size:13.5px; letter-spacing:normal; color:var(--ink); font-weight:650}
.brand p{font-size:11.5px; color:var(--muted); margin-top:1px; letter-spacing:normal}
.nav{padding:2px 0 10px; flex:1; overflow-y:auto; position:relative}
.nav .nav-sec{font-size:11px; text-transform:none; letter-spacing:normal; color:var(--muted); padding:14px 8px 4px; font-weight:650}
.nav .nav-group{display:block}
.nav .nav-group-toggle{width:100%;border:0;background:transparent;display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;text-align:left;font-family:inherit;font-size:11px;font-weight:650;color:var(--muted);letter-spacing:normal;text-transform:none}
.nav .nav-group-toggle::-webkit-details-marker{display:none}
.nav .nav-group-toggle .arr{font-size:12px;transition:transform .15s}
.nav .nav-group:not([open]) .nav-group-toggle .arr{transform:rotate(-90deg)}
.nav .nav-group-items{margin-left:8px;padding-left:6px;border-left:1px solid #dcdcdc}
.nav .nav-group-items .nav-item{width:100%}
.nav > .nav-group:first-child .nav-group-toggle{padding-top:2px}
.nav-item{display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:8px; color:var(--ink); text-decoration:none; font-size:13px; margin-bottom:1px; width:100%; background:none; border:none; text-align:left; transition:background .12s var(--ease-soft); position:relative; font-weight:550; min-height:32px}
.nav-item:hover{background:#e3e3e3; color:var(--ink); transform:none}
.nav-item.active{background:#e3e3e3; color:var(--ink); font-weight:650; box-shadow:none}
.nav-item.active::before{content:""; position:absolute; left:-8px; top:50%; transform:translateY(-50%); width:3px; height:20px; background:#303030; border-radius:0 3px 3px 0; opacity:1}
.nav-item .ico{width:20px; height:20px; display:flex; align-items:center; justify-content:center; flex:none; color:#4a4a4a}
.nav-item.active .ico{color:#303030}
.menu-icon-svg{display:block;width:16px;height:16px;flex:none}
.nav-item .nl{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
svg.i{flex:none; display:block; overflow:visible}
.btn svg.i{margin-right:-1px}
.nav-item .cnt{margin-left:auto; background:#e3e3e3; color:var(--muted); border-radius:8px; padding:1px 7px; font-size:11.5px; font-weight:650; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.nav-item.active .cnt{background:#fff; color:var(--ink)}
.side-foot{padding:12px 18px 16px; border-top:1px solid #dcdcdc; font-size:11.5px; color:var(--muted); line-height:1.5; position:relative; margin:0 -8px}
.side-foot .dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:#29845a; margin-right:7px; box-shadow:0 0 0 2.5px rgba(41,132,90,.18)}
.side-foot .sf-sub{margin-top:3px; padding-left:14px; color:#8a8a8a; font-size:11px}
/* ================= MAIN / PAGE HEADER ================= */
.main{flex:1; min-width:0; display:flex; flex-direction:column; background:var(--bg)}
.topbar{background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:none; padding:20px 24px 4px; display:flex; align-items:center; gap:16px; position:static; z-index:20; box-shadow:none; max-width:none; width:100%; margin:0}
.topbar h2{font-size:20px; font-weight:650; letter-spacing:normal; color:var(--ink); line-height:1.3; display:flex; align-items:center; gap:8px}
.backlink{display:flex; width:max-content; max-width:100%; height:auto; margin-bottom:4px; border-radius:0; background:transparent; box-shadow:none; border:none; color:var(--muted); font-size:12.5px; line-height:1.4; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .12s}
.backlink:hover{background:transparent; color:var(--ink)}
.topbar .sub{font-size:12.5px; color:var(--muted); margin-top:2px}
.topbar .spacer{flex:1}
.topbar .actions{display:flex; gap:8px; flex-wrap:wrap}
.content{padding:16px 24px 60px; max-width:none; width:100%; margin:0; animation:fadeUp .2s var(--ease-soft)}
.sf-panel,.master-settings-panel{width:100%; max-width:1120px; margin:0 auto; padding:20px}
.sf-panel .mhead{padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:18px}
.master-settings-panel form{padding:0}
@media(min-width:1500px){.topbar{padding:20px 32px 4px} .content{padding:16px 32px 60px} .msgbox{padding:0 32px}}
@keyframes fadeUp{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
/* ================= BUTTONS (Polaris) ================= */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none; border-radius:8px; padding:0 12px; min-height:32px; font-size:13px; font-weight:600; transition:background .12s var(--ease-soft), box-shadow .12s; white-space:nowrap; letter-spacing:normal; line-height:1; text-decoration:none}
.btn-primary{background:#303030; color:#fff; box-shadow:var(--btn-shadow-dark)}
.btn-primary:hover{background:#1a1a1a; transform:none; filter:none}
.btn-primary:active{background:#000; transform:none}
.btn-primary:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.btn-ghost{background:#fff; color:var(--ink); border:none; box-shadow:var(--btn-shadow)}
.btn-ghost:hover{background:#f7f7f7; border-color:transparent; transform:none; box-shadow:var(--btn-shadow)}
.btn-ghost:active{background:#f0f0f0}
.btn-danger{background:#fff; color:#8e1f0b; box-shadow:var(--btn-shadow)}
.btn-danger:hover{background:#fdf3f1; transform:none}
.btn-sm{padding:0 10px; min-height:28px; font-size:12.5px; border-radius:8px}
.btn-icon{background:none; border:none; border-radius:8px; width:28px; height:28px; font-size:13px; color:var(--muted); transition:.12s var(--ease-soft); display:inline-flex; align-items:center; justify-content:center}
.btn-icon:hover{background:#f1f1f1; color:var(--ink); transform:none}
.btn-icon.danger{background:none; color:#8e1f0b; border-radius:8px}
.btn-icon.danger:hover{background:#8e1f0b; color:#fff}
.btn-icon.danger svg.i{stroke:none}
.btn-icon.danger[disabled], .btn-icon.danger[disabled]:hover{background:none; color:#b5b5b5}
.btn-icon.recv{background:#e6f6ec; color:#0c5132}
.btn-icon.recv:hover{background:#cdfee1}
/* ================= CARDS / STATS ================= */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:16px}
.stat{background:var(--card); border:none; border-radius:var(--radius); padding:14px 16px; box-shadow:0 0 0 1px rgba(0,0,0,.06), var(--shadow); position:relative; overflow:hidden; transition:box-shadow .15s var(--ease-soft)}
.stat::before{content:none}
.stat:hover{transform:none; box-shadow:0 0 0 1px rgba(0,0,0,.10), var(--shadow-md)}
.stat .lbl{font-size:12px; text-transform:none; letter-spacing:normal; color:var(--muted); font-weight:600}
.stat .val{font-size:22px; font-weight:650; margin-top:6px; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.2px}
.stat .val small{font-size:12px; font-weight:550; color:var(--muted)}
.stat .extra{font-size:12px; color:var(--muted); margin-top:4px}
.stat .chip{position:absolute; right:12px; top:12px; width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; background:#f1f1f1; color:#4a4a4a; transition:.14s}
.stat.clickable{cursor:pointer}
.stat.clickable:hover .chip{background:#e3e3e3; color:#303030}
.stat.clickable:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.stat .lbl{padding-right:36px}
/* thin progress bar */
.prog{height:4px; border-radius:99px; background:#e3e3e3; overflow:hidden; margin-top:9px}
.prog span{display:block; height:100%; border-radius:99px; background:#303030; transition:width .5s var(--ease-soft)}
.prog.green span{background:#29845a}
.stat:hover .chip{transform:none}
.stat.pink .val{color:var(--ink)}
.stat.pink .chip{background:#f1f1f1}
.stat.green .val{color:#0c5132}
.stat.green .chip{background:#cdfee1}
.dashboard-content{display:grid; gap:14px; align-content:start}
.dashboard-stats{grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin:0}
.dashboard-stats .stat{display:flex; flex-direction:column; min-width:0; min-height:104px; padding:13px 14px; color:var(--ink); text-decoration:none}
.dashboard-stats .stat .val{font-size:21px; line-height:1.2; margin-top:8px}
.dashboard-stats .stat .extra{font-size:11.5px; margin-top:5px}
.dashboard-panel{padding:16px; min-width:0}
.dashboard-panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.dashboard-panel-head h3{font-size:14px; line-height:1.35; font-weight:650}
.dashboard-panel-head p{font-size:12px; color:var(--muted); margin-top:3px}
.dashboard-work-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.dashboard-work-item{display:flex; flex-direction:column; gap:8px; min-width:0; padding:12px 14px; border:1px solid var(--line); border-radius:9px; background:#f8fafc}
.dashboard-work-item span{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.25px; font-weight:650}
.dashboard-work-item strong{font-size:19px; line-height:1.2; font-weight:650; font-variant-numeric:tabular-nums}
.dashboard-table th,.dashboard-table td{white-space:nowrap}
.dashboard-table td:nth-child(4){max-width:280px; overflow:hidden; text-overflow:ellipsis}
.dashboard-empty{text-align:center; color:var(--muted); padding:24px!important}
.dashboard-module-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px}
.dashboard-module{display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; padding:9px 10px; border:1px solid var(--line); border-radius:8px; color:var(--ink); text-decoration:none; background:#fff; transition:background .12s,border-color .12s}
.dashboard-module:hover{background:#f8fafc; border-color:#dedede}
.dashboard-module span{font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dashboard-module strong{font-size:12px; font-weight:650; font-variant-numeric:tabular-nums; background:#f1f1f1; border-radius:6px; padding:2px 6px; flex:none}
@media(max-width:1250px){.dashboard-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-module-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-panel{padding:12px}}
@media(max-width:420px){.dashboard-stats{grid-template-columns:1fr}.dashboard-work-grid{grid-template-columns:1fr}}
/* ================= PIPELINE ================= */
.flow-card{background:var(--card); border:none; border-radius:var(--radius); padding:16px; box-shadow:0 0 0 1px rgba(0,0,0,.06), var(--shadow); margin-bottom:16px}
.flow-card .t{font-size:13.5px; font-weight:650}
.flow-card .s{font-size:12.5px; color:var(--muted); margin-top:2px}
.flow{display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; margin-top:14px}
.flow .step{flex:1; min-width:108px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer; transition:.14s var(--ease-soft); position:relative}
.flow .step:hover{border-color:#b5b5b5; transform:none; box-shadow:var(--shadow-md); background:#fafafa}
.flow .step .n{font-size:18px; font-weight:650; color:var(--ink); font-variant-numeric:tabular-nums}
.flow .step .t{font-size:12px; color:var(--muted); margin-top:2px; font-weight:550; letter-spacing:normal}
.flow .step .ic{float:right; color:#8a8a8a; display:flex}
.flow .step:hover .ic{color:#303030}
.flow .arrow{display:flex; align-items:center; color:#dedede; padding:0 2px; transform:rotate(-90deg)}
@media(max-width:920px){.flow .arrow{display:none}}
.modcell{display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-weight:550}
.modcell svg.i{color:#616161}
/* ================= TABLES / INDEX ================= */
.panel{background:var(--card); border:none; border-radius:var(--radius); box-shadow:0 0 0 1px rgba(0,0,0,.06), var(--shadow); overflow:hidden}
.dpop{position:fixed; top:0; left:0; z-index:210; display:none; width:284px; padding:12px;
background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.22)}
.dpop.show{display:block; animation:drop .12s var(--ease-soft)}
.dpop-head{display:flex; align-items:center; gap:6px; margin-bottom:8px}
.dpop-title{flex:1; text-align:center; font-size:13.5px; font-weight:650; color:var(--ink)}
.dpop-nav{width:28px; height:28px; border:none; border-radius:8px; background:transparent; color:var(--ink);
display:flex; align-items:center; justify-content:center; transition:background .12s}
.dpop-nav:hover{background:#f1f1f1}
.dpop-next svg{transform:rotate(180deg)}
.dpop-dow{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:2px}
.dpop-dow span{text-align:center; font-size:11.5px; font-weight:650; color:var(--muted); padding:4px 0}
.dpop-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.dpc{height:34px; border:none; border-radius:8px; background:transparent; font-size:13px; font-weight:550;
color:var(--ink); display:flex; align-items:center; justify-content:center; transition:background .1s}
.dpc:hover{background:#f1f1f1}
.dpc-mute{pointer-events:none}
.dpc-today{box-shadow:inset 0 0 0 1px var(--line); font-weight:700}
.dpc-sel{background:#303030; color:#fff; font-weight:700}
.dpc-sel:hover{background:#1a1a1a}
.dpop-foot{display:flex; justify-content:space-between; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line)}
/* ===== Shopify-style report date range ===== */
.rdp-trig{display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 10px 0 8px; border:none; border-radius:8px;
background:#fff; box-shadow:var(--btn-shadow); font-size:13px; font-weight:650; color:var(--ink)}
.rdp-trig:hover{background:#f7f7f7}
.rdp-trig .rdp-calic{display:inline-flex; color:#616161}
.rdp-chip{display:inline-flex; align-items:center; height:32px; padding:0 12px; border-radius:8px; background:#fff;
box-shadow:var(--btn-shadow); font-size:13px; font-weight:550; color:var(--ink)}
.rdp-pop{position:fixed; z-index:220; display:none; background:#fff; border:1px solid var(--line); border-radius:14px;
box-shadow:0 18px 48px rgba(0,0,0,.22); overflow:hidden; min-width:min(760px,94vw)}
.rdp-pop.show{display:flex; animation:drop .12s var(--ease-soft)}
.rdp-side{width:168px; flex:none; padding:8px; border-right:1px solid var(--line); background:#fafafa}
.rdp-si{display:block; width:100%; text-align:left; border:none; background:transparent; border-radius:8px;
padding:8px 10px; font-size:13px; font-weight:550; color:var(--ink); margin-bottom:1px}
.rdp-si:hover{background:#f1f1f1}
.rdp-si.on{background:#e3e3e3; font-weight:650; box-shadow:var(--btn-shadow)}
.rdp-main{flex:1; min-width:0; display:flex; flex-direction:column; background:#fff}
.rdp-dates{display:flex; align-items:center; gap:10px; padding:12px 16px 6px}
.rdp-date{flex:1; min-width:0}
.rdp-date .inp{cursor:text; background:#fff}
.rdp-date.on .inp{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent)}
.rdp-arrow{color:var(--muted); flex:none; font-size:16px; font-weight:650}
.rdp-lastbar{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 16px 4px}
.rdp-lastbar .inp{width:auto; min-width:72px}
.rdp-n{width:64px!important; min-width:64px!important; text-align:center}
.rdp-check{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:550; margin-left:8px; cursor:pointer}
.rdp-pills{display:flex; flex-wrap:wrap; gap:6px}
.rdp-pill{height:28px; padding:0 10px; border:none; border-radius:8px; background:#f1f1f1; font-size:12.5px; font-weight:600}
.rdp-pill.on{background:#303030; color:#fff}
.rdp-cals{display:flex; gap:8px; padding:8px 16px 12px; flex-wrap:wrap}
.rdp-cal{width:280px; min-width:260px; flex:1}
.rdp-cal-h{display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:6px; font-size:13.5px; font-weight:650}
.rdp-cal-h .dpop-nav{position:static}
.rdp-hint{font-size:12.5px; color:var(--muted); padding:4px 16px 8px}
.rdp-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 16px;
border-top:1px solid var(--line); background:#fff}
.rdp-foot .rdp-sum{font-size:13px; font-weight:550; color:var(--muted)}
.dpc-in{background:#f1f1f1}
.dpc-in.dpc-sel, .dpc-sel.dpc-in{background:#303030; color:#fff}
@media(max-width:820px){
.rdp-pop.show{flex-direction:column; max-height:86vh; overflow:auto}
.rdp-side{width:auto; border-right:none; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:4px}
.rdp-si{width:auto}
}
/* ===== Masters: tabbed layout ===== */
.masters-wrap{display:grid; grid-template-columns:232px minmax(0,1fr); gap:16px; align-items:start}
.mnav{background:#fff; border-radius:12px; box-shadow:0 0 0 1px rgba(0,0,0,.06), var(--shadow); padding:8px; position:sticky; top:16px; max-height:calc(100vh - 180px); overflow:auto}
.mnav-sec{font-size:11px; font-weight:650; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; padding:12px 8px 4px}
.mnav-sec:first-child{padding-top:4px}
.mnav-item{display:flex; align-items:center; gap:9px; width:100%; border:none; background:none; text-align:left; text-decoration:none;
padding:7px 8px; border-radius:8px; font-size:13px; font-weight:550; color:var(--ink); min-height:32px; transition:background .12s}
.mnav-item:hover{background:#f1f1f1}
.mnav-item.active{background:#f1f1f1; font-weight:650; box-shadow:var(--btn-shadow)}
.mnav-item .mn-ic{width:20px; height:20px; display:flex; align-items:center; justify-content:center; color:#616161; flex:none}
.mnav-item .menu-icon-svg{width:14px;height:14px}
.mnav-item.active .mn-ic{color:#303030}
.mnav-item .mn-l{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mnav-item .cnt{font-size:11.5px; font-weight:650; color:var(--muted); background:#ebebeb; border-radius:6px; padding:0 6px; min-width:20px; text-align:center}
.mnav-item.active .cnt{background:#fff; color:var(--ink)}
.mpanel{padding:18px 20px 20px}
.mhead{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px}
.mhead h3{font-size:15px; font-weight:650; display:flex; align-items:center; gap:8px}
.mhead h3 .c{font-size:12px; font-weight:650; color:var(--muted); background:#f1f1f1; border-radius:8px; padding:1px 8px}
.mhead p{font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.5}
.mtools{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px}
.mtools .add-row .inp{min-width:160px}
.msearch{max-width:260px; flex:0 1 260px}
.mlist{max-height:none; border-radius:10px}
.mlist .master-item{padding:10px 12px}
#inward-items tr.row-over td{background:#fff5f4}
#inward-items tr.row-over input[data-f="recQty"]{border-color:#8e1f0b; box-shadow:0 0 0 2px rgba(142,31,11,.18)}
#inward-items .tdr{color:var(--ink)}
.segbar{display:inline-flex; gap:4px; padding:3px; background:#f1f1f1; border-radius:10px}
.seg{display:inline-flex; align-items:center; gap:6px; border:none; background:transparent; border-radius:8px;
padding:6px 14px; font-size:13px; font-weight:600; color:var(--muted); transition:.12s}
.seg:hover{color:var(--ink)}
.seg.on{background:#fff; color:var(--ink); box-shadow:var(--btn-shadow)}
.seg.locked{cursor:not-allowed; opacity:.55}
.seg.locked:hover{color:var(--muted)}
.seg.on.locked{opacity:1; color:var(--ink)}
.seg svg.i{color:currentColor}
#jw-issues td:nth-child(3), #jw-extras td:nth-child(3){min-width:130px}
#jw-issues td:nth-child(4), #jw-extras td:nth-child(4){min-width:170px}
#jw-issues td:nth-child(5), #jw-extras td:nth-child(5){min-width:150px}
#jw-issues td:nth-child(3), #jw-extras td:nth-child(3){min-width:150px}
#jw-issues .po-ref-cell, #jw-extras .po-ref-cell{min-width:120px}
#jw-issues .uom-cell, #jw-extras .uom-cell{min-width:0; width:74px}
#jw-issues .pod-cell, #jw-extras .pod-cell{min-width:176px}
#jw-issues .uom-cell .inp, #jw-extras .uom-cell .inp{width:74px; text-align:center; padding-left:6px; padding-right:6px}
#jw-issues th.jw-item-col, #jw-extras th.jw-item-col,
#jw-issues td.jw-item-cell, #jw-extras td.jw-item-cell{width:220px;min-width:220px;max-width:220px;box-sizing:border-box}
#jw-issues td.jw-item-cell .cbox, #jw-extras td.jw-item-cell .cbox{width:100%;min-width:0;max-width:100%}
#jw-issues td.jw-item-cell .cbox-input, #jw-extras td.jw-item-cell .cbox-input{width:100%;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
#sf-issues-table th.jw-item-col, #sf-extras-table th.jw-item-col,
#sf-issues-table td.jw-item-cell, #sf-extras-table td.jw-item-cell{width:220px;min-width:220px;max-width:220px;box-sizing:border-box}
#sf-issues-table td.jw-item-cell select.inp, #sf-extras-table td.jw-item-cell select.inp{width:100%;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
.cbox.cbox-disabled{opacity:.68}
.cbox.cbox-disabled .cbox-input{cursor:not-allowed;background:#f5f5f5;color:#777}
#inward-items td:nth-child(2), #pr-items td:nth-child(2){min-width:140px}
#inward-items td:nth-child(3), #pr-items td:nth-child(3){min-width:210px}
#pr-items td.srcol, #pr-table th.srcol{text-align:center; width:52px}
#pr-items td{vertical-align:middle}
#pr-items td.num{font-variant-numeric:tabular-nums}
#pr-items td:nth-child(6) .inp.num{width:96px; min-width:88px}
#pr-items td:nth-child(8) .inp.num{width:96px; min-width:88px}
.cellhint{font-size:10.5px; line-height:1.3; margin-top:3px; min-height:12px; color:var(--muted)}
.cellhint.ok{color:#0c5132}
.cellhint.bad{color:#8e1f0b}
.inp.inp-bad{border-color:#8e1f0b; box-shadow:0 0 0 2px rgba(142,31,11,.15)}
/* required-field highlight applied on save */
.cbox.cbox-bad .cbox-input, .mcbox.cbox-bad .mcbox-input{border-color:#8e1f0b; box-shadow:0 0 0 2px rgba(142,31,11,.15)}
.field.field-bad > .lbl, .field.field-bad > label.lbl{color:#8e1f0b; font-weight:650}
.field.field-bad > .lbl::after{content:' \2022'; font-weight:800; font-size:15px; line-height:0; vertical-align:middle}
td.cell-bad{background:#fff5f4}
.req-flash{animation:reqFlash .5s var(--ease-soft) 1}
@keyframes reqFlash{0%{box-shadow:0 0 0 0 rgba(142,31,11,.45)}70%{box-shadow:0 0 0 6px rgba(142,31,11,0)}100%{box-shadow:0 0 0 0 rgba(142,31,11,0)}}
#pt-billtos td{min-width:130px; vertical-align:top}
#pt-billtos .bt-addr{min-width:210px}
#pt-billtos td:nth-child(2){min-width:170px}
#pt-billtos td:last-child{min-width:0}
.intot-wrap{max-width:420px; margin-left:auto}
.inward-bottom-grid{display:flex;flex-direction:column;gap:20px;width:100%;margin-top:24px}
.inward-bottom-grid.single{display:block;width:100%;margin-top:24px}
.inward-bottom-grid .sec{margin-top:0}
.inward-attachments-panel{width:100%;min-width:0;margin-top:0}
.inward-attachments-panel .table-wrap{width:100%;max-width:100%;overflow-x:auto}
.inward-attachments-panel table.mini-table{width:100%;min-width:600px;table-layout:auto}
.inward-attachments-panel table.mini-table th:first-child,
.inward-attachments-panel table.mini-table td:first-child{width:48px;min-width:48px;text-align:center}
.inward-attachments-panel table.mini-table th:nth-child(2),
.inward-attachments-panel table.mini-table td:nth-child(2){width:auto;min-width:220px}
.inward-attachments-panel table.mini-table td:nth-child(2) .inp{width:100%}
.inward-attachments-panel table.mini-table th:nth-child(3),
.inward-attachments-panel table.mini-table td:nth-child(3){width:210px;min-width:190px}
.inward-attachments-panel table.mini-table th:nth-child(4),
.inward-attachments-panel table.mini-table td:nth-child(4){width:110px;min-width:100px;text-align:center}
.inward-attachments-panel table.mini-table th:last-child,
.inward-attachments-panel table.mini-table td:last-child{width:90px;min-width:90px;text-align:right}
.inward-summary-row{width:100%;display:flex;justify-content:flex-end}
.inward-summary-panel{width:100%;max-width:420px;min-width:0;margin-top:0}
.inward-summary-panel .intot-wrap{width:100%;max-width:420px;margin-left:auto}
@media(max-width:1050px){.inward-bottom-grid,.inward-bottom-grid.single{width:100%}.inward-attachments-panel,.inward-summary-panel{width:100%}}
.grid-even5{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0 14px}
.grid-even5 .inp, .grid-even5 .inp.num{width:100%}
@media(max-width:1100px){.grid-even5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.grid-even5{grid-template-columns:1fr}}
.intot{width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:10px; overflow:hidden; min-width:0}
.intot th{background:#fff; text-align:left; font-size:12.5px; font-weight:600; color:var(--ink);
padding:9px 14px; border-bottom:1px solid var(--line2); text-transform:none; letter-spacing:normal; position:static}
.intot td{text-align:right; font-size:12.5px; padding:9px 14px; border-bottom:1px solid var(--line2); font-variant-numeric:tabular-nums}
.intot tr:last-child th, .intot tr:last-child td{border-bottom:none}
.intot tr.grand th, .intot tr.grand td{font-weight:700; background:#f7f7f7}
.att-cell{position:relative;min-width:180px}.att-upload-box{width:164px;min-height:108px;margin:0}.att-preview-cell{width:90px;white-space:nowrap}
.att-none{font-size:12.5px; color:var(--muted)}
.att-has{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:550; color:#0c5132}
.att-file{display:block; margin-top:6px; font-size:12px; max-width:240px}
#inward-items .tdr .sub-line{font-weight:550}
.master-item .inuse{display:inline-block; margin-left:8px; font-size:11px; font-weight:600; color:var(--muted);
background:#f1f1f1; border-radius:6px; padding:1px 7px; vertical-align:middle}
.master-item.mi-locked{background:#fcfcfc}
.btn-icon[disabled]{opacity:.38; cursor:not-allowed}
.btn-icon[disabled]:hover{background:none; color:var(--muted)}
@media(max-width:920px){
.masters-wrap{grid-template-columns:1fr}
.mnav{position:static; display:flex; flex-wrap:wrap; gap:4px}
.mnav-sec{width:100%; padding:6px 8px 2px}
.mnav-item{width:auto}
.mnav-item .cnt{display:none}
}
/* ===== index tabs (saved views) ===== */
.tabs{display:flex; gap:2px; padding:6px 8px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; background:#fff}
.tabs::-webkit-scrollbar{display:none}
.tab{border:none; background:none; border-radius:8px; padding:5px 10px; font-size:13px; font-weight:550; color:var(--muted); white-space:nowrap; display:inline-flex; align-items:center; gap:6px; transition:background .12s, color .12s; position:relative}
.tab:hover{background:#f1f1f1; color:var(--ink)}
.tab.active{background:#f1f1f1; color:var(--ink); font-weight:650; box-shadow:var(--btn-shadow)}
.tab .tc{font-size:11.5px; font-weight:600; color:var(--muted); background:#ebebeb; border-radius:6px; padding:0 5px; min-width:18px; text-align:center}
.tab.active .tc{background:#e3e3e3; color:#303030}
.po-toolbar{gap:8px}
.po-list-panel{min-height:0}
.po-tabs{min-height:42px}
.po-filter-bar{min-height:48px; gap:10px}
.po-search-form{display:flex;align-items:center;gap:8px;flex:1;min-width:220px}
.po-search{width:100%;min-width:0}
.po-filter-bar>.rowcount{margin-left:0}
.po-table{min-width:1000px;table-layout:auto}
.po-table th{font-size:11.5px;padding:8px 10px}
.po-table td{padding:8px 10px;font-size:12px}
.po-table th:first-child,.po-table td:first-child{width:64px;text-align:center}
.po-table th:nth-child(2),.po-table td:nth-child(2){min-width:104px}
.po-table th:nth-child(3),.po-table td:nth-child(3){min-width:94px}
.po-table th:nth-child(4),.po-table td:nth-child(4){min-width:190px}
.po-table th:nth-child(5),.po-table td:nth-child(5){min-width:130px}
.po-table .po-num{text-align:right;font-variant-numeric:tabular-nums}
.po-table .po-number{font-weight:650;color:var(--ink)}
.po-table .po-supplier{max-width:300px;overflow:hidden;text-overflow:ellipsis}
.po-table .actions-cell{text-align:right;white-space:nowrap}
.po-status{display:inline-flex;align-items:center;border-radius:5px;padding:3px 8px;font-size:11px;line-height:1.3;white-space:nowrap;border:1px solid var(--line)}
.po-status-approved{background:#e8f7ed;color:#0c5132;border-color:#c8ead4}
.po-status-draft{background:#f5f5f5;color:#616161}
.po-status-open{background:#fff8e1;color:#8a6116;border-color:#f0dfa6}
.po-status-cancelled{background:#fdf0ee;color:#8e1f0b;border-color:#f2d0c9}
.po-status-neutral{background:#f1f6fd;color:#00527c;border-color:#d3e4f2}
.po-empty{text-align:center;color:var(--muted);padding:28px!important}
.po-pager{min-height:46px}
.po-pager .rowcount{margin-left:0}
.po-page-size{font-size:12px;color:var(--muted);padding:5px 8px;border:1px solid var(--line);border-radius:7px;white-space:nowrap}
.po-pager .btn.disabled{pointer-events:none;opacity:.4}
.rowcount{font-size:12.5px; color:var(--muted); font-weight:550; margin-left:auto; white-space:nowrap}
.pager .rowcount{margin-left:0; margin-right:auto}
.pager .btn.disabled{opacity:.38; pointer-events:none; cursor:not-allowed}
.pager{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border-top:1px solid var(--line); background:#fff}
.pager-nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.pager-num{display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; padding:0 6px; border:none; background:transparent; border-radius:8px; font-weight:600; font-size:13px; color:var(--ink); line-height:1; text-decoration:none}
.pager-num:hover{background:#f1f1f1}
.pager-num.on{background:#f1f1f1; box-shadow:var(--btn-shadow)}
.pager-gap{color:var(--muted); padding:0 4px; font-size:13px}
.pager .inp{width:auto; min-width:108px}
.pager .btn[disabled]{opacity:.38; cursor:not-allowed}
/* ===== bulk action bar ===== */
.bulkbar{display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--line); background:#f1f1f1; font-size:13px; animation:slideDown .14s var(--ease-soft)}
.bulkbar .bsp{flex:1}
.bulkbar .cbox{min-width:150px}
@keyframes slideDown{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
/* ===== checkbox ===== */
.cbx{display:inline-flex; align-items:center; cursor:pointer}
.cbx input{appearance:none; -webkit-appearance:none; width:17px; height:17px; border-radius:5px; border:1.5px solid #a9a9a9; background:#fff; cursor:pointer; position:relative; transition:.12s; margin:0}
.cbx input:hover{border-color:#616161}
.cbx input:checked{background:#303030; border-color:#303030}
.cbx input:checked::after{content:""; position:absolute; left:5px; top:1.5px; width:4px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg)}
.cbx input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.filter-bar{display:flex; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); flex-wrap:wrap; align-items:center; background:#fff}
.filter-bar .cbox{min-width:150px}
.search{flex:1; min-width:200px; position:relative}
.search .inp{width:100%; padding-left:34px; background:#fff}
.search::before{content:none}
.search > svg.i{position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; z-index:1}
.table-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; min-width:780px}
th{background:#f7f7f7; font-size:12px; text-transform:none; letter-spacing:normal; color:var(--muted); text-align:left; padding:8px 12px; border-bottom:1px solid var(--line); white-space:nowrap; font-weight:650; position:sticky; top:0; z-index:2}
.list-panel{display:flex; flex-direction:column; max-height:calc(100vh - 158px)}
.list-panel .index-stick{flex:none; background:#fff; z-index:6}
.list-panel .table-wrap{flex:1 1 auto; min-height:0; overflow:auto}
.list-panel .table-wrap th{position:sticky; top:0; z-index:4; background:#f7f7f7; box-shadow:0 1px 0 var(--line)}
.list-panel .pager{flex:none}
.mpanel{display:flex; flex-direction:column; max-height:calc(100vh - 158px); overflow:hidden}
.mpanel.menu-editor-host,.mpanel.user-editor-host{max-height:calc(100vh - 120px);overflow:auto;display:block}
.mpanel .mhead, .mpanel .mtools{flex:none; background:#fff}
.mpanel .mlist, .mpanel .master-list{flex:1 1 auto; min-height:120px; overflow:auto; max-height:none}
.mpanel .pager{flex:none}
.mnav{max-height:calc(100vh - 158px); overflow:auto}
#im-list .table-wrap, #pt-list .table-wrap, #rep-body .table-wrap{
max-height:min(62vh, calc(100vh - 260px)); overflow:auto}
#im-list th, #pt-list th, #rep-body th{position:sticky; top:0; z-index:3; background:#f7f7f7; box-shadow:0 1px 0 var(--line)}
td{padding:10px 12px; border-bottom:1px solid var(--line2); vertical-align:middle; font-size:13px}
.xfilter-row th{padding:5px 6px;background:#fff;position:sticky;top:33px;z-index:3}
.xfilter-row input{width:100%;min-width:64px;height:26px;border:1px solid #a9a9a9;border-radius:5px;padding:3px 7px;font:inherit;font-size:11.5px;background:#fff;color:var(--ink);outline:none}
.xfilter-row input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.xfilter-row input::placeholder{color:#9a9a9a}
th.sortable{cursor:pointer; user-select:none; transition:background .1s, color .1s}
th.sortable:hover{background:#f1f1f1; color:var(--ink)}
th.sortable.on{color:var(--ink)}
th .thin{display:inline-flex; align-items:center; gap:4px}
th.num .thin{justify-content:flex-end; width:100%}
th .sarr{display:inline-flex; color:var(--ink)}
th.selcol, td.selcol{width:38px; padding-right:0; padding-left:14px}
tbody tr{transition:background .1s var(--ease-soft); cursor:pointer}
tbody tr:hover td{background:#fafafa}
tbody tr.sel td{background:#f1f6fd}
tbody tr.sel:hover td{background:#e8f1fc}
tbody tr:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
td .badge{vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums}
th.srcol, td.srcol{width:52px; min-width:46px; max-width:64px; text-align:center; font-variant-numeric:tabular-nums; color:var(--muted); font-weight:650; white-space:nowrap; padding-left:10px; padding-right:6px}
.master-item .mi-sr{flex:0 0 32px; width:32px; color:var(--muted); font-weight:650; font-variant-numeric:tabular-nums; font-size:12.5px}
.master-item .mi-id{flex:0 0 94px!important;width:94px;min-width:94px!important;color:var(--muted);font-weight:650;font-size:12px;white-space:nowrap}
.master-status-cell{flex:0 0 130px!important;display:flex;align-items:center;gap:8px}.master-status-sw{flex:none}.master-status-label{font-size:11.5px;font-weight:650}.master-status-label.on{color:#0c5132}.master-status-label.off{color:#8e1f0b}
.master-list-head{display:grid;grid-template-columns:32px 94px minmax(0,1fr) 130px 72px;gap:8px;padding:7px 12px;background:#f7f7f7;border:1px solid var(--line);border-bottom:none;border-radius:10px 10px 0 0;font-size:11.5px;font-weight:650;color:var(--muted)}
.master-list-head + .master-list{border-radius:0 0 10px 10px}
.sub-line{font-size:12px; color:var(--muted); margin-top:1px}
.actions-cell{white-space:nowrap; text-align:right}
.empty{text-align:center; padding:56px 24px; color:var(--muted); display:flex; flex-direction:column; align-items:center}
.empty .big{width:56px; height:56px; border-radius:14px; background:#f1f1f1; color:#616161; display:flex; align-items:center; justify-content:center; margin-bottom:14px; filter:none; opacity:1}
.empty h3{font-size:14.5px; font-weight:650; color:var(--ink); margin-bottom:5px}
.empty p{margin-bottom:16px; font-size:13px; max-width:420px; line-height:1.5}
/* ================= INPUTS ================= */
/* KEND2C: light 1px border, 10px radius, 38px height, 13px font, soft grey focus ring */
.inp, .ginp{background-color:#fff; border:1px solid #a9a9a9; border-radius:10px; padding:8px 12px; min-height:38px; outline:none; font-size:13px; color:#1a1a1a; transition:box-shadow .12s var(--ease-soft), border-color .12s; width:100%}
.inp:hover, .ginp:hover{border-color:#8a8a8a}
.inp:focus, .ginp:focus{border-color:#6e6e6e; box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.inp::placeholder, .ginp::placeholder{color:#9a9a9a}
select.inp, select.ginp{appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 10px center; background-size:14px 14px; padding-right:32px}
select.inp[multiple], select.inp[size]{background-image:none; padding-right:12px}
#jw-issues .uom-cell select.inp, #jw-extras .uom-cell select.inp{background-image:none; padding-right:6px}
/* native date fields: KEND2C calendar glyph on the LEFT, native indicator hidden
(storage-bridge.js opens the picker on click anywhere in the field) */
input[type=date].inp, input[type=date].ginp{padding-left:36px; background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMCAyMCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjNjE2MTYxJyBzdHJva2Utd2lkdGg9JzEuNScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cmVjdCB4PSczLjI1JyB5PSc0Ljc1JyB3aWR0aD0nMTMuNScgaGVpZ2h0PScxMicgcng9JzInLz48cGF0aCBkPSdNMy4yNSA4LjI1aDEzLjVNNyAzLjV2Mi41TTEzIDMuNXYyLjUnLz48L3N2Zz4=); background-repeat:no-repeat; background-position:10px center; background-size:16px 16px; cursor:pointer}
input[type=date].inp::-webkit-calendar-picker-indicator, input[type=date].ginp::-webkit-calendar-picker-indicator{opacity:0; cursor:pointer}
/* ===== date field + calendar popover ===== */
.mini-table td .inp[data-date]{min-width:132px}
.inp[data-date]{padding-left:34px; cursor:pointer; background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMCAyMCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjNjE2MTYxJyBzdHJva2Utd2lkdGg9JzEuNScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cmVjdCB4PSczLjI1JyB5PSc0Ljc1JyB3aWR0aD0nMTMuNScgaGVpZ2h0PScxMicgcng9JzInLz48cGF0aCBkPSdNMy4yNSA4LjI1aDEzLjVNNyAzLjV2Mi41TTEzIDMuNXYyLjUnLz48L3N2Zz4=); background-repeat:no-repeat; background-position:10px center; background-size:16px 16px}
.inp[data-date]:disabled{cursor:not-allowed}
.inp-sm{padding:4px 10px; min-height:28px; font-size:12.5px; width:auto}
.inp.num{width:96px}
.lbl{display:block; font-size:12.5px; font-weight:700; color:#1a1a1a; text-transform:none; letter-spacing:normal; margin:0 0 7px}
.field{margin-bottom:14px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 14px}
.grid-auto{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0 14px}
/* fixed-width row: fields keep a sane width instead of stretching edge to edge */
/* inline validation hints under a field */
.fhint{font-size:11.5px; margin-top:4px; min-height:14px; color:var(--muted)}
.fhint.ok{color:#0c5132}
.fhint.bad{color:#8e1f0b}
/* hide native spinners — the app validates input itself */
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; appearance:textfield}
.grid-fixed{display:grid; grid-template-columns:repeat(auto-fill,240px); gap:0 14px; justify-content:start}
.grid-fixed.wide-last > .field:last-child{grid-column:span 2}
.grid-fixed.in-jwr > .inj-no{order:1}
.grid-fixed.in-jwr > .inj-date{order:2}
.grid-fixed.in-jwr > .inj-jw{order:3}
.grid-fixed.in-jwr > .inj-ven{order:4}
.grid-fixed.in-jwr > .inj-wh{order:5}
.grid-fixed.in-jwr > .inj-ch{order:6}
.grid-fixed.in-jwr > .inj-by{order:7}
tr.jw-dgrp{cursor:default}
tr.jw-dgrp td, tbody tr.jw-dgrp:hover td{background:#f1f1f1; font-weight:650; font-size:12.5px; color:var(--ink); padding:7px 12px; border-bottom:1px solid var(--line)}
tr.jw-dgrp .jw-dgrp-cell{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
tr.jw-dgrp .jw-dgrp-n{margin-left:auto; font-weight:550; color:var(--muted); font-size:12px}
tr.jw-dgrp .jw-dgrp-dc{background:#fff; border-radius:8px; padding:4px 10px; box-shadow:var(--btn-shadow); font-size:12.5px; font-weight:550}
tr.jw-dgrp .jw-dgrp-dc b{font-weight:700}
tr.jw-dgrp .jw-dgrp-pod{min-width:160px}
tr.jw-dgrp .pod-file{max-width:150px}
/* Date/DC group is displayed inside the item rows instead of consuming a
separate full-width row. It spans every line belonging to that DC. */
td.jw-merged-dispatch{min-width:164px; width:164px; padding:10px 12px; vertical-align:middle; text-align:center;
background:#f7f7f7; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
tbody tr:hover td.jw-merged-dispatch{background:#f7f7f7}
.jw-merge-date{display:flex; align-items:center; justify-content:center; gap:7px; font-size:12.5px; white-space:nowrap}
.jw-merge-date svg{color:var(--muted)}
.jw-merge-dc{display:inline-flex; align-items:center; justify-content:center; margin-top:9px; padding:4px 8px;
border-radius:8px; background:#fff; box-shadow:var(--btn-shadow); font-size:12px; white-space:nowrap}
.jw-merge-lines{margin-top:10px; text-align:center; font-size:11.5px; color:var(--muted); white-space:nowrap}
.dc-select-summary{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.dc-select-summary .stock-chip{margin:0}
.dc-pod-status{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600}
.dc-pod-status.ok{color:#0c5132}.dc-pod-status.miss{color:#8a6116}
.audit-change{font-size:11.5px;line-height:1.4;padding:2px 0;border-bottom:1px dotted #e3e3e3;max-width:560px;white-space:normal;word-break:break-word}.audit-change:last-child{border-bottom:none}
.audit-note{min-width:260px;max-width:420px;white-space:normal;line-height:1.45;background:#fafafa;color:#303030}
.sf-builder{background:#eef2f6;border:1px solid #cfd8e3;border-radius:12px;overflow:hidden;min-height:calc(100vh - 180px)}.sf-builder-top{height:58px;background:#fff;border-bottom:1px solid #cfd8e3;display:flex;align-items:center;gap:8px;padding:0 12px}.sf-builder-title{min-width:0;flex:1}.sf-builder-title b{display:block;font-size:14px}.sf-builder-title span{font-size:11px;color:#65758b}.sf-builder-title input{border:none;background:transparent;font-weight:700;font-size:14px;width:min(280px,100%);outline:none;padding:2px 0}.sf-builder-title input:focus{border-bottom:1px solid #0176d3}.sf-builder-body{display:grid;grid-template-columns:310px minmax(0,1fr);min-height:calc(100vh - 238px)}.sf-builder-side{background:#fff;border-right:1px solid #cfd8e3;overflow:auto;max-height:calc(100vh - 180px)}.sf-builder-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #d8e0e8}.sf-builder-tabs button{height:42px;border:none;background:#fff;font-weight:650;color:#526174;border-bottom:3px solid transparent}.sf-builder-tabs button.on{color:#0176d3;border-bottom-color:#0176d3}.sf-side-body{padding:12px}.sf-side-section{margin-top:14px}.sf-side-section h4{font-size:11px;color:#526174;text-transform:uppercase;letter-spacing:.45px;margin:0 0 7px;display:flex;justify-content:space-between}.sf-drop-zone{border:1px dashed #9eafc1;background:#f8fafc;border-radius:7px;min-height:42px;padding:6px}.sf-chip{display:flex;align-items:center;gap:5px;background:#eaf5fe;color:#014486;border:1px solid #b8d8f2;border-radius:5px;padding:5px 7px;margin:3px;font-size:11.5px}.sf-chip span{flex:1}.sf-chip button{border:none;background:transparent;color:#526174;padding:0 2px}.sf-fields{max-height:260px;overflow:auto;border:1px solid #e0e6ed;border-radius:7px}.sf-field{display:flex;align-items:center;gap:7px;padding:7px 9px;border-bottom:1px solid #eef1f4;font-size:11.5px}.sf-field:last-child{border-bottom:none}.sf-field:hover{background:#f3f8fc}.sf-report-canvas{min-width:0;padding:12px;overflow:auto}.sf-preview-head{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #d5dde6;border-bottom:none;border-radius:8px 8px 0 0;padding:9px 11px}.sf-preview-head b{flex:1}.sf-preview-head span{font-size:11px;color:#65758b}.sf-report-table{background:#fff;border:1px solid #d5dde6;border-radius:0 0 8px 8px;overflow:auto;max-height:calc(100vh - 340px)}.sf-report-table table{min-width:900px}.sf-report-table th{background:#f4f6f9;border-right:1px solid #d8e0e8}.sf-report-table td{border-right:1px solid #edf0f3}.sf-filter-card{border:1px solid #d8e0e8;border-radius:7px;padding:8px;margin-bottom:7px;background:#fff}.sf-filter-card b{font-size:11.5px}.sf-filter-card div{font-size:10.5px;color:#65758b;margin-top:2px}.sf-builder .btn-brand{background:#0176d3;color:#fff;box-shadow:none}.sf-builder .btn-brand:hover{background:#0b5cab}.sf-format-pills{display:flex;background:#eef2f6;border-radius:7px;padding:3px}.sf-format-pills button{border:none;background:transparent;border-radius:5px;padding:5px 8px;font-size:11px}.sf-format-pills button.on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15)}.sf-unsaved{color:#b85d00;font-size:10.5px}.sf-proto-badge{background:#ede9fe;color:#6d28d9;border-radius:5px;padding:3px 7px;font-size:10px;font-weight:700}.sf-builder-chart{background:#fff;border:1px solid #d5dde6;border-bottom:none;padding:10px;border-radius:8px 8px 0 0}@media(max-width:980px){.sf-builder-body{grid-template-columns:1fr}.sf-builder-side{max-height:none;border-right:none;border-bottom:1px solid #cfd8e3}.sf-report-canvas{padding:8px}}
.reporting-shell{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;align-items:start}.reporting-main{min-width:0;grid-column:2}.reporting-customize{grid-column:1;grid-row:1}.reporting-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;background:#fff;border-bottom:1px solid var(--line)}.reporting-toolbar .report-name{min-width:190px;max-width:280px}.reporting-toolbar .inp{width:auto}.reporting-customize{background:#fff;border-radius:12px;box-shadow:0 0 0 1px rgba(0,0,0,.06);position:sticky;top:72px;max-height:calc(100vh - 100px);overflow:auto}.reporting-customize h3{font-size:14px;padding:14px;border-bottom:1px solid var(--line)}.pivot-section{padding:10px 12px;border-bottom:1px solid var(--line)}.pivot-section h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin:0 0 8px}.pivot-option{display:flex;align-items:center;gap:8px;padding:6px 4px;font-size:12.5px;cursor:pointer}.pivot-option input{width:16px;height:16px}.pivot-table th{position:sticky;top:0}.pivot-table td.pivot-break{font-weight:600}.pivot-indent{display:inline-block}.pivot-total td{font-weight:700;background:#f1f6fd}.pivot-head{display:flex;align-items:center;gap:5px;justify-content:space-between}.pivot-menu{border:none;background:transparent;color:var(--muted);width:20px;height:20px;border-radius:4px}.pivot-menu:hover{background:#e3e3e3;color:var(--ink)}.pivot-empty{padding:55px 20px;text-align:center;color:var(--muted)}.saved-report-bar{display:flex;gap:6px;align-items:center}.pivot-filter-chip{display:inline-flex;align-items:center;gap:4px;background:#e8f1fc;color:#00527c;border-radius:6px;padding:2px 7px;font-size:11px;margin:2px}.reporting-summary{display:flex;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}.reporting-summary span{font-size:11.5px;color:var(--muted)}.sf-report-home-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}.sf-report-home-head>div{flex:1}.report-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.report-type-card{border:1px solid var(--line);border-radius:10px;background:#fff;padding:16px;text-align:left;min-height:120px}.report-type-card:hover{border-color:#8aa7c4;box-shadow:0 4px 14px rgba(0,82,124,.1)}.report-type-card b{display:block;font-size:14px;margin-bottom:5px}.report-type-card span{font-size:12px;color:var(--muted)}.pivot-chart{padding:14px;border-bottom:1px solid var(--line);background:#fff}.pivot-chart h4{font-size:12px;margin-bottom:10px}.pivot-bars{display:flex;flex-direction:column;gap:7px}.pivot-bar-row{display:grid;grid-template-columns:150px 1fr 90px;gap:8px;align-items:center;font-size:11.5px}.pivot-bar-track{height:18px;background:#eef2f6;border-radius:4px;overflow:hidden}.pivot-bar-fill{height:100%;background:#0b74b5;border-radius:4px}.pivot-donut-wrap{display:flex;align-items:center;gap:20px}.pivot-donut{width:150px;height:150px;border-radius:50%;position:relative}.pivot-donut::after{content:"";position:absolute;inset:34px;border-radius:50%;background:#fff}.pivot-legend{display:grid;gap:5px;font-size:11.5px}.pivot-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}@media(max-width:1050px){.reporting-shell{grid-template-columns:1fr}.reporting-main,.reporting-customize{grid-column:1;grid-row:auto}.reporting-customize{position:static;max-height:none}.report-type-grid{grid-template-columns:1fr 1fr}}
.auth-login{position:fixed;inset:0;z-index:999;background:#fff;display:grid;grid-template-columns:minmax(0,2.8fr) minmax(450px,1fr);overflow:hidden}
.auth-visual{position:relative;min-width:0;margin:28px 28px 48px;background:#eef1f4;border-radius:10px;overflow:visible;box-shadow:0 12px 34px rgba(18,55,91,.13)}
.auth-visual>img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center;border-radius:10px;transition:opacity .35s ease}
.auth-slide-dots{position:absolute;left:50%;bottom:-31px;z-index:2;transform:translateX(-50%);display:flex;gap:8px;padding:6px 9px;border-radius:99px;background:#d9e0e8;box-shadow:0 2px 8px rgba(18,55,91,.14)}.auth-slide-dots:empty{display:none}.auth-slide-dots button{width:8px;height:8px;border:none;border-radius:50%;background:#9aa8b7;padding:0}.auth-slide-dots button.on{width:22px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px #9aa8b7 inset}
.auth-side{background:#fff;display:flex;align-items:center;justify-content:center;padding:36px 26px;border-left:1px solid #e7edf3}
.auth-login-card{width:min(430px,100%);background:#fff;border:none;border-radius:16px;box-shadow:0 20px 55px rgba(18,55,91,.12);padding:38px}
.auth-login-card .login-eyebrow{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:6px;background:#eef5fb;color:#00527c;font-size:10.5px;font-weight:750;letter-spacing:.8px;text-transform:uppercase;margin-bottom:17px}
.auth-login-card h2{font-size:26px;line-height:1.2;margin:0 0 6px;color:#17212b}.auth-login-card>p{color:#6b7280;margin:0 0 24px}.auth-login-card .field{margin-bottom:16px}.auth-login-card .inp{min-height:40px}.auth-login-card .trial{font-size:11.5px;color:#4b5563;background:#f8fafc;border:1px solid #e5eaf0;border-radius:8px;padding:8px 10px;margin-bottom:18px;text-align:left}.auth-login-card .login-submit{min-height:42px;background:#086da8}.auth-login-card .login-submit:hover{background:#005985}
@media(max-width:860px){.auth-login{grid-template-columns:1fr}.auth-visual{display:none}.auth-side{padding:20px}.auth-login-card{max-width:440px;box-shadow:0 14px 40px rgba(18,55,91,.14)}}
.user-access-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:8px}.user-access-grid label{display:flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;font-size:12px}
.perm-table{width:100%;min-width:760px;table-layout:fixed}.perm-table th:first-child,.perm-table td:first-child{width:36%;text-align:left}.perm-table th:not(:first-child),.perm-table td:not(:first-child){width:12.8%;text-align:center;padding-left:6px;padding-right:6px}.perm-table .cbx{justify-content:center}.perm-table td:last-child .btn{margin:0 auto}
.login-slide-thumb{width:150px;height:82px;object-fit:cover;border:1px solid var(--line);border-radius:8px;background:#e8eef5;display:block}.login-thumb-replace{position:relative;display:inline-block;cursor:pointer}.login-thumb-replace input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.login-thumb-replace span{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);background:rgba(0,0,0,.72);color:#fff;border-radius:5px;padding:3px 8px;font-size:10px;font-weight:650;pointer-events:none}.login-thumb-replace:hover img{filter:brightness(.85)}
.shop-menu-page{max-width:780px;margin:0 auto}.shop-menu-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}.shop-menu-head>div{flex:1}.shop-menu-name{background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 14px;margin-bottom:14px}.shop-menu-name label{font-size:12px;font-weight:650;display:block;margin-bottom:6px}.shop-menu-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}.shop-menu-card>h4{font-size:14px;margin:0 0 12px}.shop-menu-group{border:1px solid #dfe3e8;border-radius:8px;margin-bottom:8px;overflow:hidden;background:#fff}.shop-menu-group.dragging{opacity:.45;outline:2px dashed #6aa9d8}.shop-menu-parent{display:flex;align-items:center;gap:9px;padding:11px 12px;background:#fafafa;font-size:13px;font-weight:650}.shop-menu-parent .drag{color:#8a8a8a;letter-spacing:-2px}.shop-menu-parent .chev{border:none;background:transparent;width:22px}.shop-menu-parent .count{margin-left:auto;color:var(--muted);font-size:11px}.shop-menu-children{padding:6px 10px 8px 38px;border-top:1px solid #e8ebef}.shop-menu-group.closed .shop-menu-children{display:none}.shop-menu-group.closed .chev{transform:rotate(-90deg)}.shop-menu-child{display:grid;grid-template-columns:24px minmax(0,1fr) 104px;align-items:center;gap:7px;padding:9px 8px;border:1px solid #e1e5ea;border-radius:7px;margin:5px 0;background:#fff;cursor:grab}.shop-menu-child:hover{background:#f8fafc;border-color:#bcc9d6}.shop-menu-child.dragging{opacity:.4}.shop-menu-child .handle{color:#8a8a8a}.shop-menu-child small{display:block;color:var(--muted);margin-top:2px}.shop-menu-add{width:100%;border:1px dashed #b9c4cf;background:#fff;color:#005bd3;border-radius:7px;padding:9px;text-align:left;margin-top:8px}.shop-menu-save{display:flex;justify-content:flex-end;margin-top:12px}
@media(max-width:760px){.user-access-grid{grid-template-columns:1fr 1fr}}
td.jw-merged-pod{vertical-align:middle; text-align:center; min-width:178px; width:178px; padding:10px 12px;
background:#fafafa; border-left:1px solid var(--line); border-right:1px solid var(--line)}
tbody tr:hover td.jw-merged-pod{background:#fafafa}
td.jw-merged-pod .pod-thumb{display:block; width:max-content; margin:0 auto 6px}
td.jw-merged-pod .pod-file{display:block; max-width:156px; margin:4px auto 0}
td.jw-merged-pod .sub-line{max-width:156px; margin:5px auto 0; white-space:normal; overflow-wrap:anywhere; text-align:center}
.grp-toggle{display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px 0 8px; background:#fff; box-shadow:var(--btn-shadow); border-radius:8px; font-size:13px; font-weight:650; color:var(--ink)}
.sw{width:36px; height:20px; border:none; border-radius:99px; background:#dedede; position:relative; padding:0; flex:none}
.sw.on{background:#29845a}
.sw-knob{position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s}
.sw.on .sw-knob{transform:translateX(16px)}
.grp-by{display:inline-flex; align-items:center; gap:8px}
.grp-by .mcbox{min-width:210px; max-width:280px}
.grp-by-l{font-size:12.5px; font-weight:650; color:var(--muted)}
tr.rep-grp td{background:#f1f6fd; font-weight:650; cursor:default}
tbody tr.rep-grp:hover td{background:#e8f0fb}
tr.rep-grp.d1 td{background:#f6f8fb; padding-left:28px}
tr.rep-grp.d2 td{padding-left:44px}
tr.rep-grp .rep-g-n{font-weight:550; color:var(--muted); margin-left:8px}
@media(max-width:760px){.grid2,.grid3,.grid-auto{grid-template-columns:1fr}}
.hint{font-size:12px; color:var(--muted); margin-top:8px; display:block; line-height:1.6}
/* ===== Shopify-like rich text editor (PO Terms) ===== */
.rte{border:1px solid #a9a9a9; border-radius:10px; background:#fff; overflow:hidden}
.rte:focus-within{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent)}
.rte-bar{display:flex; align-items:center; gap:2px; flex-wrap:wrap; padding:6px 8px; border-bottom:1px solid var(--line); background:#fafafa}
.rte-sep{width:1px; height:18px; background:var(--line); margin:0 5px; flex:none}
.rte-sel{height:28px; border:none; background:transparent; font:inherit; font-size:13px; font-weight:550; padding:0 6px; border-radius:6px; color:var(--ink); cursor:pointer}
.rte-sel:hover{background:#e3e3e3}
.rte-btn{width:28px; height:28px; border:none; background:transparent; border-radius:6px; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; flex:none; padding:0}
.rte-btn:hover{background:#e3e3e3}
.rte-btn.on{background:#e3e3e3; box-shadow:var(--btn-shadow)}
.rte-btn b,.rte-btn i,.rte-btn u,.rte-btn s{font-size:13px; line-height:1; font-family:Georgia,serif}
.rte-body{min-height:168px; max-height:420px; overflow:auto; padding:12px 14px; outline:none; line-height:1.55; font-size:13.5px; color:var(--ink)}
.rte-body:empty:before{content:attr(data-ph); color:#8a8a8a; pointer-events:none}
.rte-body p{margin:0 0 8px}
.rte-body p:last-child{margin-bottom:0}
.rte-body h2{font-size:18px; margin:0 0 8px}
.rte-body h3{font-size:15px; margin:0 0 8px}
.rte-body blockquote{margin:0 0 8px; padding-left:12px; border-left:3px solid #dedede; color:var(--muted)}
.rte-body ul,.rte-body ol{margin:6px 0 8px; padding-left:22px}
.rte-body li{margin:2px 0}
.rte-body a{color:var(--accent)}
.rte.code .rte-body{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; white-space:pre-wrap; background:#f7f7f7}
/* ================= COMBOBOX ================= */
.cbox{position:relative}
.cbox .cbox-input{padding-right:30px; cursor:pointer; background:#fff}
.cbox .cbox-caret{position:absolute; right:9px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; color:var(--muted); pointer-events:none; transition:color .14s}
.cbox .cbox-caret svg.i{display:block; width:16px; height:16px; stroke-width:1.6}
.cbox.open .cbox-caret{color:var(--ink)}
.cbox-list{position:fixed; top:0; left:0; width:auto; min-width:180px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.20); max-height:250px; overflow-y:auto; z-index:200; display:none; padding:4px; animation:drop .12s var(--ease-soft)}
@keyframes drop{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
.cbox.open .cbox-list{display:block}
.cbox.cbox-ro{pointer-events:none;opacity:.72}.cbox.cbox-ro .cbox-input{background:#f4f4f4;color:#6b6b6b;-webkit-text-fill-color:#6b6b6b}
.cbox-list::-webkit-scrollbar{width:8px}
.cbox-opt{padding:7px 10px; border-radius:8px; cursor:pointer; font-size:13px; display:flex; align-items:center; gap:8px; transition:background .1s}
.cbox-opt:hover,.cbox-opt.active{background:#f1f1f1; color:var(--ink)}
.cbox-opt .tick{margin-left:auto; color:#303030; font-weight:700; font-size:11px}
.cbox-opt .hint-l{font-size:11.5px; color:var(--muted); margin-left:auto}
.cbox-search{display:flex; align-items:center; gap:6px; padding:6px 10px 8px; margin-bottom:4px; border-bottom:1px solid var(--line); font-size:11.5px; color:var(--muted); font-weight:550}
.cbox-search svg.i{color:var(--muted); flex:none}
.cbox-empty{padding:12px; font-size:12.5px; color:var(--muted); text-align:center}
.cbox-add{padding:8px 10px; border-radius:8px; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--accent); border-top:1px solid var(--line); margin-top:4px; display:flex; align-items:center; gap:6px}
.cbox-add:hover{background:#f1f6fd}
.cbox.compact .cbox-input{padding:4px 26px 4px 10px; min-height:28px; font-size:12.5px}
td .cbox{max-width:150px}
td .cbox .cbox-input{border-color:transparent; background:transparent; font-weight:550}
td .cbox .cbox-input:hover{border-color:#b9b9b9; background:#fff}
.cbox.compact .cbox-caret svg.i{width:14px; height:14px}
td .cbox .cbox-caret{opacity:0; transition:opacity .12s}
tbody tr:hover td .cbox .cbox-caret, td .cbox.open .cbox-caret{opacity:1}
td .cbox.open .cbox-input{border-color:var(--accent); background:#fff}
.cbox.compact .cbox-list{font-size:12.5px}
/* ================= BADGES (Polaris) ================= */
.badge{display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:8px; font-size:12px; font-weight:550; line-height:1.4; white-space:nowrap; background:#e3e3e3; color:#303030}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85; flex:none}
.b-green{background:#cdfee1; color:#0c5132}
.b-amber{background:#ffd6a4; color:#5e4200}
.b-red{background:#ffd7d4; color:#8e1f0b}
.b-blue{background:#d3eafd; color:#00527c}
.b-gray{background:#e3e3e3; color:#4a4a4a}
.b-pink{background:#ebd7fd; color:#5700d1}
.b-yellow{background:#fff2a8; color:#6b5200}
.b-purple{background:#e6dcff; color:#4c1d95}
.b-teal{background:#c9f3ec; color:#075e54}
/* ================= MODAL ================= */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:flex-start; justify-content:center; padding:48px 18px; z-index:60; overflow-y:auto; backdrop-filter:none; -webkit-backdrop-filter:none}
.overlay.show{display:flex; animation:overlayIn .14s var(--ease-soft)}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
.modal{background:#fff; border-radius:14px; width:100%; max-width:min(1100px,94vw); box-shadow:var(--shadow-lg); animation:pop .16s var(--ease-soft); overflow:hidden}
.modal.modal-wide{max-width:min(1400px,96vw)}
.modal.modal-xl{max-width:96vw}
.modal.modal-item{max-width:min(1100px,84vw);height:auto;max-height:78vh;display:flex;flex-direction:column}
.modal.modal-item .modal-head,.modal.modal-item .modal-foot{flex:none}
.modal.modal-item .modal-body{flex:0 1 auto;min-height:0;max-height:calc(78vh - 118px);overflow:auto}
@media(max-width:900px){.modal.modal-item{max-width:96vw;max-height:88vh}.modal.modal-item .modal-body{max-height:calc(88vh - 118px)}}
.modal.modal-sm{max-width:min(460px,94vw)}
.dlg-msg{font-size:13.5px; line-height:1.55; color:var(--ink)}
.dlg-msg .dlg-strong{font-weight:650}
.dlg-note{margin-top:10px; font-size:12.5px; color:var(--muted); background:#f7f7f7; border-radius:8px; padding:8px 10px}
.dlg-field{margin-top:4px}
.dlg-field label{display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:5px}
.dlg-field + .dlg-field{margin-top:12px}
.btn-critical{background:#8e1f0b; color:#fff; box-shadow:var(--btn-shadow-dark)}
.btn-critical:hover{background:#7a1a09}
@keyframes pop{from{transform:translateY(10px) scale(.99); opacity:0}to{transform:none; opacity:1}}
.modal-head{display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; backdrop-filter:none; z-index:5}
.modal-head::before{content:none}
.modal-head h3{font-size:15px; font-weight:650; flex:1; letter-spacing:normal}
.modal-head .tag{font-size:12px; font-weight:550; color:#303030; background:#e3e3e3; padding:2px 8px; border-radius:8px; margin-right:8px}
.modal-body{padding:20px; background:#fff}
.modal-foot{display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--line); background:#fff; position:sticky; bottom:0}
/* form section rhythm */
.entry-page .sec{padding-bottom:8px; border-bottom:1px solid var(--line)}
.entry-page .sec::after{display:none}
.inp:disabled,.inp[readonly]{background-color:#fafafa; color:var(--muted)}
/* date fields stay white and keep their calendar icon even though they're readonly */
.inp[data-date][readonly]{background-color:#fff; color:var(--ink)}
.inp[data-date]:disabled{background-color:#fafafa; color:var(--muted)}
.field:last-child{margin-bottom:0}
.sec{font-size:13px; font-weight:650; text-transform:none; letter-spacing:normal; color:var(--ink); margin:22px 0 10px; display:flex; align-items:center; gap:10px}
.sec:first-child{margin-top:0}
.sec::after{content:""; flex:1; height:1px; background:var(--line)}
.mini-table th{padding:7px 10px; font-size:11.5px}
.mini-table td{padding:6px 8px}
.mini-table .inp{padding:6px 12px; min-height:32px; font-size:12.5px}
/* date cells keep room for the calendar glyph at the smaller mini-table scale */
.mini-table .inp[data-date]{padding-left:30px; background-position:8px center; background-size:15px 15px}
/* readable widths for the PO / entry item grids */
.mini-table td .cbox{max-width:none}
.mini-table td .cbox .cbox-input{border-color:#a9a9a9; background:#fff}
.mini-table th, .mini-table td{white-space:nowrap}
#po-items td:nth-child(2){min-width:150px} /* Classification */
#po-items td:nth-child(3){min-width:230px} /* Item Name (with code) */
#po-items td:nth-child(4){min-width:110px} /* HSN No */
#po-items td:nth-child(5){min-width:80px} /* Unit */
/* auto-filled, read-only cells read as data, not inputs */
#po-items td .inp:disabled{background:#f7f7f7; border-color:#e3e3e3; color:#4a4a4a; -webkit-text-fill-color:#4a4a4a; opacity:1; cursor:not-allowed}
#po-items td input.num, #po-items td .inp-sm{min-width:78px}
.tot-row td{font-weight:650; background:#f7f7f7; border-top:1px solid var(--line); font-variant-numeric:tabular-nums}
/* ================= CONTEXTUAL SAVE BAR ================= */
.savebar{position:fixed; top:64px; left:50%; transform:translateX(-50%) translateY(-140%); z-index:70; width:min(1100px, calc(100vw - 32px)); transition:transform .22s var(--ease); pointer-events:none}
.savebar.show{transform:translateX(-50%) translateY(0); pointer-events:auto}
.sb-in{background:#303030; border-radius:10px; padding:8px 8px 8px 16px; display:flex; align-items:center; gap:10px; box-shadow:0 6px 20px rgba(0,0,0,.34); color:#e3e3e3; font-size:13px}
.sb-msg{font-weight:550; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sb-dot{width:8px; height:8px; border-radius:50%; background:#ffb800; flex:none; box-shadow:0 0 0 3px rgba(255,184,0,.2)}
.sb-sp{flex:1}
.sb-in .btn-ghost{background:transparent; color:#e3e3e3; box-shadow:0 0 0 1px #616161 inset}
.sb-in .btn-ghost:hover{background:#4a4a4a; box-shadow:0 0 0 1px #8a8a8a inset}
.sb-in .btn-primary{background:#fff; color:#303030; box-shadow:none}
.sb-in .btn-primary:hover{background:#e3e3e3}
body.has-savebar .globalbar{background:#1a1a1a}
@media(max-width:920px){.savebar{top:auto; bottom:12px; transform:translateX(-50%) translateY(180%)}}
body.has-savebar .topbar{padding-top:64px}
/* ================= TOASTS (Polaris dark pill) ================= */
.toast-wrap{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); top:auto; right:auto; z-index:120; display:flex; flex-direction:column; gap:8px; pointer-events:none; align-items:center}
.toast{background:#303030; color:#fff; padding:10px 16px; border-radius:8px; font-size:13px; font-weight:550; box-shadow:0 4px 12px rgba(0,0,0,.28); display:flex; gap:8px; align-items:center; animation:toastIn .18s var(--ease-soft); max-width:420px; border-left:none}
.toast .ti{display:flex; color:#36fba1; flex:none}
.toast.red .ti{color:#ffd7d4}
.tundo{background:transparent; border:none; color:#fff; font-weight:650; font-size:13px; text-decoration:underline; padding:2px 4px; margin-left:6px; border-radius:6px}
.tundo:hover{background:rgba(255,255,255,.14); text-decoration:none}
.toast.green{background:#303030}
.toast.red{background:#8e1f0b}
@keyframes toastIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.toast.out{opacity:0; transform:translateY(10px); transition:.24s}
/* ================= MASTERS ================= */
.master-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:12px}
.master-box{background:var(--card); border:none; border-radius:var(--radius); padding:16px; box-shadow:0 0 0 1px rgba(0,0,0,.06), var(--shadow); transition:box-shadow .15s var(--ease-soft)}
.im-thumb{width:28px; height:28px; border-radius:6px; object-fit:cover; vertical-align:middle; margin-right:6px; border:1px solid var(--line)}
.im-image-col{width:64px}.im-list-image{width:42px;height:42px;border:1px solid var(--line);border-radius:7px;background:#fff;padding:2px;overflow:hidden}.im-list-image img{width:100%;height:100%;object-fit:cover;border-radius:5px;display:block}.im-list-image:hover{border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,91,211,.16)}.im-no-image{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;background:#f1f1f1;border-radius:7px;color:#9a9a9a}
.item-image-viewer{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:28px}.item-image-viewer-card{max-width:min(900px,92vw);max-height:90vh;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 22px 70px rgba(0,0,0,.4)}.item-image-viewer-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}.item-image-viewer-head b{flex:1}.item-image-viewer-body{padding:14px;display:flex;justify-content:center;background:#f7f7f7}.item-image-viewer-body img{max-width:100%;max-height:calc(90vh - 75px);object-fit:contain;display:block}
.im-thumb-empty{display:inline-flex; align-items:center; justify-content:center; background:#f1f1f1; font-size:13px}
.im-thumb-lg{width:54px; height:54px; border-radius:8px; object-fit:cover; border:1px solid var(--line); margin-left:10px}
.radio-row{display:flex; gap:16px; align-items:center; height:34px; font-size:13px; color:var(--ink)}
.radio-row label{display:flex; align-items:center; gap:6px; cursor:pointer; font-weight:550}
.im-equal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.im-equal-grid .field{min-width:0}.im-equal-grid .inp,.im-equal-grid .cbox{width:100%;max-width:none}
.im-status-toggle{display:flex;align-items:center;gap:10px;min-height:34px}.im-status-toggle b{font-size:12.5px}
@media(max-width:1000px){.im-equal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.im-equal-grid{grid-template-columns:1fr}}
.img-upload-row{display:flex; align-items:center; gap:10px; height:34px}
.file-btn{position:relative; overflow:hidden; display:inline-flex}
.file-btn input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%}
.master-box:hover{box-shadow:0 0 0 1px rgba(0,0,0,.10), var(--shadow-md); transform:none}
.master-box h4{font-size:13.5px; font-weight:650; margin-bottom:10px; display:flex; align-items:center; gap:8px}
.master-box h4 .mh-ic{width:26px; height:26px; border-radius:7px; background:#f1f1f1; color:#4a4a4a; display:flex; align-items:center; justify-content:center; flex:none}
.master-item.mi-empty{color:var(--muted); font-style:normal; justify-content:center; padding:16px 12px; font-size:12.5px}
.master-box h4 .c{margin-left:auto; font-size:11.5px; background:#e3e3e3; color:var(--muted); padding:1px 8px; border-radius:8px; font-weight:650}
.master-list{max-height:232px; overflow-y:auto; border:1px solid var(--line); border-radius:10px; margin-bottom:10px}
.master-item{display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid var(--line2); font-size:13px; gap:8px}
.master-item:last-child{border-bottom:none}
.master-item .mi-acts{display:inline-flex; gap:2px; flex:0 0 auto; margin-left:auto}
.master-item > span:not(.mi-sr):not(.mi-id):not(.mi-acts):not(.master-status-cell){flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.mtools{align-items:flex-end}
.mtools .add-row{align-items:center}
.mtools .search.msearch{flex:0 0 240px}
.rc-szhint{text-transform:none; font-weight:550; color:var(--muted); font-size:11px}
.rc-table .rc-stcol, .rc-table .rc-stname{width:210px; min-width:210px; max-width:210px}
.rc-stname{font-size:12.5px; line-height:1.35}
.rc-stname b{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rc-szcell{min-width:260px}
/* let the size column soak up all spare width so the fixed columns stay tight */
.rc-table th:nth-child(4), .rc-table td:nth-child(4){width:100%}
/* tighter Date / Style / UOM so the size boxes get the room */
.rc-table .rc-dcol, .rc-table td:nth-child(2){width:112px; min-width:112px; padding-left:6px; padding-right:4px}
.rc-table td:nth-child(2) .inp,
.rc-table.mini-table td .inp[data-date]{width:112px; min-width:112px; padding-left:24px; padding-right:4px; background-position:5px center; background-size:14px 14px}
.jw-stname{font-size:12.5px}
.rc-addbar{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.rc-table .rc-ucol, .rc-table .rc-uom{width:46px; min-width:46px; padding-left:4px; padding-right:4px}
.rc-table .rc-sumunit{white-space:nowrap}
.rc-table .rc-uom{color:var(--muted); font-size:12.5px}
.rc-table .rc-qccol, .rc-table .rc-qc{width:104px; min-width:104px}
.rc-table .rc-whcol, .rc-table .rc-wh{width:150px; min-width:150px}
.rc-table .rc-qc .cbox-input, .rc-table .rc-wh .cbox-input{padding-right:26px}
.rc-table tr.rc-locked .inp{background:#f4f4f4; color:#5a5a5a; -webkit-text-fill-color:#5a5a5a}
.rc-table .cbox-ro{pointer-events:none; opacity:.75}
.rc-table .actions-cell{white-space:nowrap}
.rc-sz{display:flex; flex-wrap:wrap; gap:4px}
.rc-sz .szbox{margin-right:2px}
.rc-sz .szin{width:58px}
.szbal{font-size:10.5px; color:var(--muted); font-weight:600; line-height:1.2}
.rc-sz-tot{display:inline-block; margin-top:5px; font-size:11.5px; font-weight:700; color:var(--ink)}
.rc-table .rc-hist td{background:#fafafa}
.rc-table .rc-hist .inp{background:#fff}
.rc-table .rc-sumbody{border-top:2px solid var(--line)}
.rc-table .rc-sum td{padding-top:7px; padding-bottom:7px; border-bottom:none}
.rc-table .rc-sum .rc-lbl{font-weight:600; color:var(--ink)}
.rc-table .rc-sum .num b{font-variant-numeric:tabular-nums}
.rc-table .rc-total-row td{border-top:1px solid var(--line); background:#f7f7f7}
.rc-table .rc-diff-row td{border-top:1px solid var(--line); font-weight:700}
.rc-table .rc-diff-row .rc-lbl{font-weight:700}
.style-cell{min-width:300px}
.style-cell .cbox-input{text-overflow:ellipsis}
.mcbox-opt.mcbox-lock{color:var(--muted); cursor:not-allowed; background:#fafafa}
.mcbox-opt.mcbox-lock:hover{background:#f4f4f4}
.mcbox-opt.mcbox-lock .tick svg{vertical-align:-2px}
.dpc.dpc-off{color:#dedede; cursor:not-allowed; background:none}
.dpc.dpc-off:hover{background:none}
/* rows locked because downstream entries already consume them */
tr.row-locked td, tr.jw-edit-locked td{background:#fafafa}
tr.row-locked .inp, tr.jw-edit-locked .inp{background:#f4f4f4; border-color:#e3e3e3; color:#6b6b6b; -webkit-text-fill-color:#6b6b6b; cursor:not-allowed}
tr.row-locked .cbox, tr.row-locked .mcbox, tr.jw-edit-locked .cbox, tr.jw-edit-locked .mcbox{pointer-events:none; opacity:.85}
tr.row-locked .cbox-caret, tr.jw-edit-locked .cbox-caret{opacity:.4}
tr.jw-edit-locked .jw-row-edit{opacity:1; color:var(--accent); background:#fff; box-shadow:var(--btn-shadow)}
tr.jw-edit-locked .jw-row-edit:hover{background:#f1f6fd}
.btn-icon[disabled]{opacity:.35; cursor:not-allowed}
.btn-icon[disabled]:hover{background:none; color:var(--muted)}
.lock-note{display:inline-flex; align-items:center; gap:6px; margin:10px 0 0; padding:8px 12px; border-radius:8px;
background:#fff8e6; color:#5a4300; font-size:12.5px; font-weight:550}
.po-add-item-bar{display:flex;width:100%;margin-top:10px;clear:both}
.master-item .meta{font-size:11.5px; color:var(--muted); font-weight:550}
.add-row{display:flex; gap:8px; flex-wrap:wrap}
.add-row .inp{flex:1; min-width:112px}
.add-row .btn{flex-shrink:0}
.section-title{font-size:15px; font-weight:650; margin:24px 0 10px; display:flex; align-items:center; gap:8px; letter-spacing:normal}
.section-title .c{font-size:12px; background:#e3e3e3; color:#303030; padding:1px 8px; border-radius:8px; font-weight:650}
.po-form-actions{gap:8px}
/* ================= PO form — stitchflow7 Polaris design =================
One seamless white card, 6-column field grid, 40px soft-gray inputs,
borderless items table (matches the user's stitchflow7 screenshot). */
.po-form-card{padding:24px 28px;margin-bottom:14px}
.po-section{margin:0 0 26px}
.po-section:last-child{margin-bottom:0}
.po-section-title{font-size:14px;font-weight:650;padding-bottom:12px;margin:0 0 20px;border-bottom:1px solid var(--line)}
.po-form-card .required{color:inherit;font-weight:650}
.po-header-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px 24px;align-items:start}
.po-header-grid .field{min-width:0;margin-bottom:16px}
.po-header-grid .lbl{font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.po-header-grid .inp{min-width:0;width:100%}
.required{color:#b42318;font-weight:700}
.po-hint{display:block;font-size:12px;line-height:1.45;color:var(--muted);margin-top:6px}
.po-header-grid select[multiple]{height:32px;min-height:32px;overflow:hidden}
.po-add-item-bar{display:flex;margin-top:14px}
.po-total-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 24px;margin-top:22px}
/* Separate the totals row from delivery and other PO details below it. */
.po-total-grid + .po-section{margin-top:24px}
.po-total-grid .field{min-width:0;margin:0}
.po-total-grid .lbl{font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.po-total-grid output.inp{display:flex;align-items:center;min-height:32px;background-color:#fafafa;color:#616161;font-variant-numeric:tabular-nums}
.po-extra-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.po-advanced{margin-top:8px;border-top:1px solid var(--line);padding-top:10px}
.po-advanced summary{font-size:12px;color:var(--muted);font-weight:600;cursor:pointer}
.po-advanced[open] summary{margin-bottom:12px}
.po-terms-card{padding-bottom:0}
.po-editor-toolbar{display:flex;align-items:center;gap:3px;min-height:38px;padding:4px 8px;border:1px solid #dedede;border-radius:10px 10px 0 0;background:#fafafa}
.po-editor-toolbar button,.po-editor-toolbar select{height:27px;min-width:28px;padding:2px 8px;border:0;border-radius:6px;background:transparent;color:var(--ink);font-size:11.5px}
.po-editor-toolbar button:hover,.po-editor-toolbar select:hover{background:#ececec}
.po-editor-toolbar>span{height:18px;border-left:1px solid #d0d5dd;margin:0 4px}
.po-editor{min-height:138px;max-height:340px;overflow:auto;padding:14px;border:1px solid #dedede;border-top:0;border-radius:0 0 10px 10px;background:#fff;font-size:12.5px;line-height:1.6}
.po-editor:focus{outline:2px solid rgba(0,91,211,.25);outline-offset:-2px}
.po-editor ol,.po-editor ul{padding-left:24px}
.po-json-state{display:none!important}
.po-form-footer{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:4px 0 10px}
.po-form-footer #formMsg{margin-right:auto;color:#8e1f0b}
.po-invalid,.inp.po-invalid{border-color:#b42318!important;box-shadow:0 0 0 2px rgba(180,35,24,.14)!important}
.po-validation-summary{padding:10px 14px;margin-bottom:12px;border:1px solid #f2c7c2;border-radius:8px;background:#fff5f4;color:#8e1f0b;font-size:12px}
@media(max-width:1200px){.po-header-grid,.po-extra-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.po-total-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.po-header-grid,.po-extra-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.po-total-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.po-form-card{padding:16px}.po-form-actions .btn{padding:0 8px}.po-editor{min-height:120px}}
.recent tbody tr{cursor:pointer}
.key-line{font-size:12px; color:var(--muted)}
.recent td{font-size:12.5px}
.demo-bar{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.footnote{margin-top:20px; font-size:12.5px; color:var(--muted); line-height:1.7; background:#fff; border:none; border-radius:12px; padding:0; box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.footnote summary{cursor:pointer; padding:12px 16px; font-weight:650; color:var(--ink); font-size:13px; list-style:none; display:flex; align-items:center; gap:8px; border-radius:12px}
.footnote summary::-webkit-details-marker{display:none}
.footnote summary::before{content:""; width:0; height:0; border-left:5px solid #616161; border-top:4px solid transparent; border-bottom:4px solid transparent; transition:transform .15s}
.footnote[open] summary::before{transform:rotate(90deg)}
.footnote summary:hover{background:#fafafa}
.footnote .fn-body{padding:0 16px 16px; border-top:1px solid var(--line); padding-top:12px}
.warn{background:#fff5ea; border:none; border-left:4px solid #ffb800; color:#5e4200; border-radius:12px; padding:12px 16px; font-size:12.5px; margin-bottom:16px; line-height:1.55; box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.stock-chip{background:#fff; border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:8px 12px; font-size:12.5px; font-weight:550; display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:4px}
.stock-chip b{color:#0c5132}
.load-msg{display:flex; align-items:center; justify-content:center; gap:10px; padding:64px 20px; color:var(--muted); font-size:13.5px; font-weight:550}
.load-msg .spin{width:20px;height:20px;border-radius:50%;border:2.5px solid #e3e3e3;border-top-color:#303030;animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.js-err{display:none; background:#ffd7d4; border:none; color:#8e1f0b; border-radius:12px; padding:12px 14px; font-size:12.5px; line-height:1.65; margin:0 0 14px; font-weight:550; white-space:pre-wrap; word-break:break-word; box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.js-err b{display:block; margin-bottom:4px}
.msgbox{max-width:none; width:100%; margin:0; padding:0 24px}
.entry-page{max-width:none; margin:0; background:var(--card); border:none; border-radius:var(--radius); padding:20px; box-shadow:0 0 0 1px rgba(0,0,0,.06), var(--shadow)}
.entry-page .sec:first-child{margin-top:0}
.entry-page.view-only .cbox,.entry-page.view-only .mcbox,.entry-page.view-only .file-btn{pointer-events:none}.entry-page.view-only{background:#fafafa}
.sizes-cell{white-space:nowrap}
.szbox{display:inline-flex; flex-direction:column; align-items:center; gap:2px; margin-right:6px}
.szlbl{font-size:11px; font-weight:600; color:var(--muted); letter-spacing:normal}
.szin{width:54px; padding:4px; min-height:28px; font-size:12.5px; text-align:center}
.sz-inputs{margin-top:6px; display:flex; flex-wrap:wrap; gap:3px}
.cons-cell{min-width:212px}
.cons-total{font-size:11.5px; font-weight:650; color:#0c5132; margin-top:4px; white-space:nowrap}
/* ================= MULTI-SELECT ================= */
.mcbox{position:relative; min-width:152px; max-width:222px}
/* form-level multiselects (e.g. PO Style) fill their field instead of the
narrow width used by the in-table size pickers */
.field > .mcbox{max-width:none; width:100%}
.mcbox .mcbox-input{padding-right:28px; cursor:pointer; text-align:left; background:#fff}
/* the caret was only positioned for .cbox — anchor it inside .mcbox too */
.mcbox .cbox-caret{position:absolute; right:9px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; color:var(--muted); pointer-events:none; transition:color .14s}
.mcbox .cbox-caret svg.i{display:block; width:16px; height:16px; stroke-width:1.6}
.mcbox-list{position:fixed; top:0; left:0; min-width:180px; width:max-content; max-width:280px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.20); max-height:232px; overflow-y:auto; z-index:200; display:none; padding:4px; animation:drop .12s var(--ease-soft)}
.mcbox.open .mcbox-list{display:block}
.mcbox.disabled{pointer-events:none;opacity:.72}.mcbox.disabled .mcbox-input{background:#f4f4f4;color:#6b6b6b;-webkit-text-fill-color:#6b6b6b}
.mcbox.open .cbox-caret{color:var(--ink)}
.mcbox-opt{padding:7px 10px; border-radius:8px; cursor:pointer; font-size:13px; display:flex; align-items:center; gap:8px; transition:background .1s}
.mcbox-opt:hover{background:#f1f1f1; color:var(--ink)}
.mcbox-opt .tick{margin-left:auto; color:#303030; font-weight:700; font-size:11px}
.mcbox-hint{font-size:11.5px; color:var(--muted); padding:6px 10px; border-bottom:1px solid var(--line); margin-bottom:4px}
/* ================= POD UPLOAD ================= */
.pod-cell{min-width:176px}
.pod-upload-box{position:relative; width:164px; min-height:104px; margin:0 auto; border:1px solid var(--line);
border-radius:8px; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:10px; overflow:hidden; transition:border-color .14s, background .14s, box-shadow .14s}
.pod-upload-box:hover{border-color:#8a8a8a; background:#fafafa; box-shadow:0 1px 3px rgba(0,0,0,.07)}
.pod-upload-box.inp-bad{border-color:#8e1f0b;box-shadow:0 0 0 2px rgba(142,31,11,.15)}
.pod-upload-box.empty{cursor:pointer}
.pod-upload-box.empty input[type=file]{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer}
.pod-upload-plus{font-size:18px; line-height:1; font-weight:500; color:#217346; margin-bottom:7px}
.pod-upload-title{font-size:12.5px; font-weight:550; color:var(--muted)}
.pod-upload-help{font-size:10.5px; color:#8a8a8a; margin-top:4px; text-align:center}
.pod-preview-img{width:76px; height:54px; object-fit:cover; border-radius:6px; border:1px solid var(--line); display:block}
.pod-preview-pdf{width:76px; height:54px; border-radius:6px; background:#f1f1f1; border:1px solid var(--line);
color:#8e1f0b; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; letter-spacing:.5px}
.pod-upload-name{width:100%; margin-top:6px; font-size:10.5px; color:var(--muted); text-align:center;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pod-upload-actions{position:absolute; top:5px; right:5px; z-index:3; display:flex; gap:4px}
.pod-upload-actions button{width:22px; height:22px; border:1px solid var(--line); border-radius:6px; background:#fff;
display:flex; align-items:center; justify-content:center; padding:0; box-shadow:0 1px 3px rgba(0,0,0,.12)}
.pod-upload-actions .pod-view{color:var(--accent)}
.pod-upload-actions .pod-del{color:#8e1f0b}
.pod-replace{position:relative; display:inline-flex; align-items:center; margin-top:6px; color:var(--accent); font-size:11px; font-weight:600; cursor:pointer}
.pod-replace input[type=file]{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer}
.invoice-gate-upload{width:100%;min-height:150px;margin-top:6px}.invoice-gate-upload input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.invoice-gate-upload .invoice-preview img{width:92px;height:68px;object-fit:cover;border-radius:7px;border:1px solid var(--line)}.invoice-gate-upload .invoice-preview .pdf{width:92px;height:68px;display:flex;align-items:center;justify-content:center;background:#f1f1f1;color:#8e1f0b;border-radius:7px;font-weight:800;border:1px solid var(--line)}.invoice-gate-delete{position:absolute;right:8px;top:8px;z-index:4;width:26px;height:26px;border:1px solid var(--line);border-radius:7px;background:#fff;color:#8e1f0b;display:none;align-items:center;justify-content:center;padding:0;box-shadow:0 2px 8px rgba(0,0,0,.14)}
@media(max-width:920px){.msgbox{padding:0 16px}}
@media(max-width:920px){
.app{flex-direction:row; min-height:auto}
.grid-fixed{grid-template-columns:1fr}
/* sidebar becomes an off-canvas drawer */
.sidebar{position:fixed; top:56px; left:0; bottom:0; width:264px; min-width:264px; height:auto;
background:#f1f1f1; box-shadow:4px 0 24px rgba(0,0,0,.18); z-index:30;
transform:translateX(-100%); padding:8px 8px 0}
body.nav-open .sidebar{transform:none}
body.nav-open .nav-scrim{display:block}
body.nav-collapsed .sidebar{width:264px; min-width:264px; padding:8px 8px 0}
body.nav-collapsed .sidebar > *{opacity:1; pointer-events:auto}
/* On phones the drawer always opens full width — no icon rail here. */
body.nav-collapsed .brand{padding:8px 8px 10px}
body.nav-collapsed .brand .logo{display:flex}
body.nav-collapsed .brand .sidebar-burger{position:absolute; transform:translateY(-50%); margin:0}
body.nav-collapsed .nav .nav-sec{height:auto; min-height:0; margin:0; padding:14px 8px 4px; background:none; color:var(--muted); font-size:11px; line-height:normal; overflow:visible}
body.nav-collapsed .nav-item{justify-content:flex-start; gap:10px; padding:8px 10px; min-height:38px}
body.nav-collapsed .nav-item .nl{display:block}
body.nav-collapsed .nav-item .cnt{display:inline-block}
body.nav-collapsed .side-foot{padding:12px 18px 16px; text-align:left; font-size:11.5px}
body.nav-collapsed .side-foot .sf-sub{display:block}
.main{width:100%; min-width:0}
.nav{display:block; padding:2px 0 10px}
.nav .nav-sec{display:block}
.nav-item{width:100%; padding:8px 10px; font-size:13.5px; min-height:38px}
.nav-item .cnt{display:inline-block}
.brand{padding:8px 8px 10px}
.side-foot{display:block}
.content{padding:12px}
.topbar{padding:14px 12px 4px; flex-wrap:wrap}
.entry-page{padding:16px}
.tabs{padding:6px}
.rowcount{display:none}
th.selcol, td.selcol{padding-left:10px}
.modal{border-radius:14px}
}
@media print{
.sidebar,.topbar .actions,.sidebar-burger,.filter-bar,.no-print,aside,.globalbar{display:none!important}
.main{margin:0}
body{background:#fff}
body::before{display:none}
.panel{box-shadow:none; border:none}
.content{padding:0}
}
/* ================= COSTING MODULE (Excel-style sheet) ================= */
.split-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 16px; align-items:start}
.split-col{min-width:0}
.split-grid table{min-width:0!important}
@media(max-width:1100px){.split-grid{grid-template-columns:1fr}}
.xl-sheet{border:1px solid #dfe1e5; border-radius:10px; overflow:hidden; background:#fff}
.xl-sheet-head{background:#eceef1; border-bottom:1px solid #dfe1e5; padding:5px 12px; font-size:10.5px; font-weight:800; letter-spacing:.8px; color:#4a4f57; text-transform:uppercase; display:flex; align-items:center; gap:8px}
.xl-sheet-head:not(:first-child){border-top:1px solid #dfe1e5}
.xl-tip{margin-left:auto; font-size:10px; font-weight:600; letter-spacing:.2px; color:#7a8089; text-transform:none; white-space:nowrap}
.xl-grid{display:grid; grid-template-columns:118px minmax(0,1fr) 108px minmax(0,1fr)}
@media(max-width:760px){
.xl-grid{grid-template-columns:110px minmax(0,1fr)}
.xl-grid .xl-cell:nth-child(n){border-right:1px solid #e6e8ec}
.xl-cell:nth-child(2n){border-right:none}
.xl-grid > :nth-last-child(-n+2){border-bottom:none}
}
.xl-cell{border-right:1px solid #e6e8ec; border-bottom:1px solid #e6e8ec; min-height:30px; background:#fff; min-width:0}
.xl-cell:nth-child(4n){border-right:none}
.xl-grid > :nth-last-child(-n+4){border-bottom:none}
.xl-cell.xl-lbl{background:#f7f8fa; padding:0 10px; display:flex; align-items:center; font-size:11.5px; font-weight:650; color:#3f4348; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.xl-cell.xl-val{padding:0; display:flex; align-items:center; min-width:0; overflow:hidden}
.xl-cell.xl-val:hover{background:#fbfcff}
.xl-cell.xl-empty{pointer-events:none; background:#fbfbfc}
.xl-grid input.xl-in, .xl-table input.xl-in, .xl-table input.inp{
border:none; border-radius:0; background:transparent; width:100%; min-height:30px; padding:4px 10px;
box-shadow:none; outline:none; font-size:12.5px;
}
.xl-grid input.xl-in:focus, .xl-table input.xl-in:focus, .xl-table input.inp:focus{
background:#fff; box-shadow:inset 0 0 0 2px #217346;
}
input.xl-in.num, .xl-table input.inp.num{text-align:right; font-variant-numeric:tabular-nums}
.xl-in::placeholder, .xl-table input.inp::placeholder{color:#a9aeb6}
table.xl-table{border-collapse:collapse; min-width:0; width:100%}
.xl-table th{background:#eceef1; font-size:10.5px; font-weight:750; color:#4a4f57; padding:4px 10px; border-right:1px solid #dfe1e5; border-bottom:1px solid #dfe1e5; text-transform:uppercase; letter-spacing:.6px; text-align:left}
.xl-table th.num{text-align:right}
.xl-table th:last-child{border-right:none}
.xl-table td{padding:0; border-right:1px solid #e6e8ec; border-bottom:1px solid #e6e8ec; vertical-align:middle; background:#fff; position:relative}
.xl-table td:last-child{border-right:none}
.xl-table tr:last-child td{border-bottom:none}
.xl-table td.xl-lblc{background:#f7f8fa; padding:0 10px; font-size:12px; font-weight:600; color:#3f4348; white-space:nowrap}
.xl-table tr.totalrow td{background:#eef1f6}
.xl-table tr.totalrow td.xl-lblc{font-weight:750; color:#22262b}
.xl-table tr.totalrow input.xl-in, .xl-table tr.totalrow input.inp{font-weight:700}
.xl-table input.xl-in[readonly], .xl-table input.inp[readonly]{background:#f4f5f7; color:#6b7280; -webkit-text-fill-color:#6b7280; cursor:default; font-weight:600}
.xl-table tr.totalrow input.xl-in[readonly], .xl-table tr.totalrow input.inp[readonly]{background:#e9ecf2; color:#3c4149; -webkit-text-fill-color:#3c4149; font-weight:750}
.mini-table.xl-table td{padding:0}
.mini-table.xl-table th{padding:4px 10px; font-size:10.5px; font-weight:750; letter-spacing:.6px; text-transform:uppercase}
.mini-table.xl-table .inp{min-height:32px; padding:6px 12px; font-size:12.5px}
td.fill-hl{background:#dff0e7!important}
.fh{position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; background:#217346; border:1.5px solid #fff; border-radius:2px; z-index:6; cursor:crosshair; box-shadow:0 0 0 1px rgba(0,0,0,.12)}
body.filling, body.filling *{user-select:none!important; -webkit-user-select:none!important}
body.filling{cursor:crosshair!important}
.xl-table td.sr-cell{text-align:center; vertical-align:middle; background:#f7f8fa; color:#7a8089; font-weight:700; font-size:12px; width:52px; min-width:52px; padding:0}
.xl-table th.c-sr{text-align:center}
.xl-table td.xl-act{text-align:center; width:44px; background:#fff}
.bom-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px}
.bom-hint{font-size:10.5px; color:#7a8089; font-weight:600}
.xl-cell.xl-imgcell{min-height:78px; position:relative; align-items:center; justify-content:center}
.xl-cell.xl-imgcell input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer; z-index:3}
.xl-imgcell .imgph{font-size:11.5px; color:#8a8f98; pointer-events:none; display:inline-flex; align-items:center; gap:6px}
.xl-imgcell .imgph::before{content:"+"; font-size:15px; font-weight:700; color:#217346; line-height:1}
.xl-imgcell img.imgprev{position:relative; z-index:2; max-height:64px; max-width:calc(100% - 30px); object-fit:contain; border-radius:6px; display:block; background:#fff; box-shadow:0 0 0 1px #e6e8ec}
.xl-imgcell .imgclear{position:absolute; top:3px; right:3px; z-index:4; width:18px; height:18px; border-radius:5px; border:none; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.14); color:#8e1f0b; font-size:10px; display:none; align-items:center; justify-content:center; line-height:1; padding:0}
.xl-imgcell .imgclear:hover{background:#fdf3f1}
.mpos{color:#0c5132;font-weight:650}
.mneg{color:#8e1f0b;font-weight:650}
/* BOM: compact so both 50% panels fit; Particulars + Cost stay readable */
table.cost-bom{min-width:0!important; width:100%; table-layout:fixed}
table.cost-bom th{white-space:normal; line-height:1.15; padding:5px 5px}
table.cost-bom td{white-space:nowrap}
table.cost-bom th.srcol, table.cost-bom td.srcol, table.cost-bom td.sr-cell{width:40px; min-width:40px; max-width:40px; padding-left:4px; padding-right:2px}
table.cost-bom th:nth-child(2), table.cost-bom td:nth-child(2){width:auto; min-width:0; white-space:normal}
table.cost-bom td:nth-child(2) .inp{width:100%; min-width:0}
table.cost-bom th:nth-child(3), table.cost-bom td:nth-child(3),
table.cost-bom th:nth-child(5), table.cost-bom td:nth-child(5){width:58px; min-width:52px}
table.cost-bom th:nth-child(4), table.cost-bom td:nth-child(4){width:86px; min-width:78px}
table.cost-bom th:nth-child(6), table.cost-bom td:nth-child(6){width:62px; min-width:56px}
table.cost-bom th:nth-child(7), table.cost-bom td:nth-child(7){width:84px; min-width:76px}
table.cost-bom td:nth-child(7) .inp{width:100%; min-width:0; text-align:right; font-weight:650}
table.cost-bom th:nth-child(8), table.cost-bom td:nth-child(8),
table.cost-bom td.xl-act{width:32px; min-width:32px}
table.cost-bom .inp.num{width:100%; min-width:0; max-width:none}
table.cost-bom .inp{padding-left:6px; padding-right:6px}
.split-col .table-wrap{overflow-x:auto}
/* Excel-like column resize on costing tables */
.xl-table th{position:relative}
.col-grip{position:absolute; right:-3px; top:0; width:8px; height:100%; cursor:col-resize; z-index:5; user-select:none}
.col-grip:hover, .col-grip.on{background:linear-gradient(90deg, transparent 3px, #217346 3px, #217346 5px, transparent 5px)}
body.col-resizing, body.col-resizing *{cursor:col-resize!important; user-select:none!important}
.cost-print-img{max-width:160px; max-height:120px; object-fit:contain; border:1px solid #ccc; border-radius:4px; background:#fff}
.xl-cell.xl-val .cbox{width:100%; max-width:none}
.xl-cell.xl-val .cbox .cbox-input{border:none; border-radius:0; background:transparent; min-height:30px; box-shadow:none; padding:4px 28px 4px 10px}
.xl-cell.xl-val .cbox .cbox-input:focus{background:#fff; box-shadow:inset 0 0 0 2px #217346; border-color:transparent}
.xl-cell.xl-val .cbox .cbox-caret{right:8px}
table.cost-bom td .cbox{max-width:none; width:100%}
table.cost-bom td .cbox .cbox-input{border:none; background:transparent; min-height:30px; box-shadow:none; padding:4px 26px 4px 6px; font-weight:550}
table.cost-bom td .cbox .cbox-input:focus{background:#fff; box-shadow:inset 0 0 0 2px #217346}
table.cost-bom td .cbox .cbox-caret{opacity:1}
/* ================= MOBILE-FIRST UX REFINEMENTS ================= */
@media(max-width:920px){
body{font-size:13px;overflow-x:hidden}
.globalbar{height:52px;padding:0 8px;gap:8px}
.globalbar .gb-brand{display:none}
.globalbar .gb-search{max-width:none;margin:0;min-width:0}
.globalbar .gb-field{min-height:36px}
.globalbar .gb-right{gap:2px}
.globalbar .gb-avatar{width:36px;padding:0;justify-content:center}
.globalbar .gb-avatar>span:last-child{display:none}
.globalbar .gb-btn{width:34px;height:34px}
.app{min-height:calc(100vh - 52px)}
.sidebar{top:52px;width:min(286px,86vw);min-width:min(286px,86vw)}
body.nav-collapsed .sidebar{width:min(286px,86vw);min-width:min(286px,86vw)}
.nav-scrim{inset:52px 0 0}
.topbar{padding:12px 12px 4px;gap:9px;align-items:flex-start}
.topbar h2{font-size:18px}
.topbar .sub{font-size:11.5px;line-height:1.35}
.topbar .actions{width:100%;gap:6px;order:3}
.topbar .actions .btn{flex:1 1 auto;min-height:36px;padding:0 10px}
.content{padding:10px 10px 56px}
.sf-panel,.master-settings-panel{padding:14px}
.msgbox{padding:0 10px}
.entry-page{padding:13px;border-radius:10px}
.entry-page .sec{margin-top:18px}
.grid-fixed,.grid2,.grid3,.grid-auto,.grid-even5,.xl-grid{grid-template-columns:1fr!important}
.grid-fixed.wide-last>.field:last-child{grid-column:auto}
.field{margin-bottom:11px}
.lbl{font-size:12px}
.inp,.cbox-input,.mcbox-input,select.inp,textarea.inp{min-height:38px;font-size:16px}
.inp-sm,.mini-table .inp{font-size:14px;min-height:34px}
.btn{min-height:36px}
.btn-sm{min-height:34px}
.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.stat{padding:12px}.stat .val{font-size:19px}
.flow-card{padding:12px}.flow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.flow .step{min-width:0}.flow .arrow{display:none}
.panel{border-radius:10px}
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;border-radius:8px}
.table-wrap table{min-width:760px}
.mini-table{min-width:720px}
.table-wrap::-webkit-scrollbar{height:7px}
.table-wrap::-webkit-scrollbar-thumb{background:#aeb7c1;border-radius:9px}
th{font-size:11.5px;padding:8px 9px}
td{padding:9px;font-size:12.5px}
th.srcol,td.srcol{position:sticky;left:0;z-index:5;background:#f7f7f7;box-shadow:1px 0 0 var(--line)}
tbody td.srcol{background:#fff}
tbody tr:hover td.srcol{background:#fafafa}
.actions-cell{position:sticky;right:0;background:#fff;z-index:4;box-shadow:-1px 0 0 var(--line)}
th.actions-cell,th.no-print:last-child{right:0;z-index:6}
.filter-bar{padding:8px;gap:7px}
.filter-bar .search{flex:1 1 100%;min-width:0}
.filter-bar>.btn,.filter-bar>span{flex:0 1 auto}
.tabs{padding:5px;gap:4px}.tab{min-height:34px;padding:6px 10px}
.pager{padding:8px;gap:6px}.pager .rowcount{display:block;flex:1 1 100%;margin:0}.pager-nav{margin-left:0}.pager select.inp{margin-left:auto;font-size:13px;width:auto;min-height:34px}
.masters-wrap{display:block}
.mnav{position:sticky;top:52px;z-index:16;display:flex!important;flex-wrap:nowrap!important;gap:5px;overflow-x:auto;max-height:none;padding:7px;margin-bottom:10px;border-radius:9px;scrollbar-width:none}
.mnav::-webkit-scrollbar{display:none}
.mnav-sec{display:none!important}
.mnav-item{flex:0 0 auto;width:auto!important;min-height:36px;padding:7px 10px;box-shadow:0 0 0 1px var(--line)}
.mnav-item .cnt{display:inline-block!important}
.mpanel{display:block;max-height:none;overflow:visible;padding:14px!important}
.mpanel .mlist,.mpanel .master-list{max-height:48vh;overflow:auto}
.mhead{gap:8px;flex-wrap:wrap}.mhead>div:last-child{margin-left:0!important;width:100%}.mhead .btn{width:100%}
.mtools{display:flex;align-items:stretch;gap:7px}.mtools .add-row{flex:1 1 100%}.mtools .search.msearch{flex:1 1 100%;max-width:none}.mtools>.btn{flex:1 1 auto}
.master-list-head{grid-template-columns:30px 80px minmax(150px,1fr) 112px 62px;min-width:560px}
.master-list{min-width:560px}
.master-box{padding:12px}
.inward-bottom-grid,.inward-bottom-grid.single{grid-template-columns:1fr!important;gap:12px;justify-content:stretch}
.inward-attachments-panel,.inward-summary-panel{width:100%}
.intot-wrap{max-width:none!important;width:100%}
.overlay{padding:10px;align-items:flex-start}
.modal,.modal.modal-wide,.modal.modal-xl,.modal.modal-item{max-width:100%;width:100%;max-height:calc(100vh - 20px);border-radius:12px}
.modal.modal-item{height:auto}
.modal-body{padding:14px;max-height:calc(100vh - 132px)!important;overflow:auto}
.modal-head,.modal-foot{padding:12px 14px}
.modal-foot .btn{flex:1}
.dpop{max-width:calc(100vw - 16px)}
.rdp-pop{min-width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)}
.rdp-cals{display:block}.rdp-cal{width:100%;min-width:0}.rdp-cal+.rdp-cal{margin-top:12px}
.savebar{width:calc(100vw - 16px)}.sb-in{padding:8px;flex-wrap:wrap}.sb-msg{flex:1}.sb-sp{display:none}
.pod-upload-box,.att-upload-box{width:150px;min-height:105px}
td.jw-merged-dispatch{min-width:145px;width:145px}
td.jw-merged-pod{min-width:164px;width:164px}
.sz-inputs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
.reporting-shell,.sf-builder-body{grid-template-columns:1fr!important}
.reporting-main,.reporting-customize,.sf-builder-side,.sf-report-canvas{grid-column:1!important;grid-row:auto!important}
.reporting-customize,.sf-builder-side{position:static;max-height:none;border-right:none;border-bottom:1px solid var(--line)}
.reporting-toolbar,.sf-builder-top{height:auto;flex-wrap:wrap;padding:8px}
.reporting-toolbar>*{flex:1 1 auto}.reporting-toolbar .report-name{max-width:none}
.sf-builder-title{flex:1 1 100%}.sf-format-pills{width:100%;overflow-x:auto}.sf-builder-top>.btn,.sf-builder-top>select{flex:1 1 auto}
.sf-report-canvas{padding:8px}.sf-report-table{max-height:none}
.report-type-grid{grid-template-columns:1fr!important}
.perm-table{min-width:680px}
.user-access-grid{grid-template-columns:1fr 1fr}
.menu-manage-grid{grid-template-columns:1fr}.shop-menu-page{max-width:none}.shop-menu-head{flex-wrap:wrap}.shop-menu-head>div{flex:1 1 100%}.shop-menu-head>.btn{flex:1}
.shop-menu-children{padding-left:16px}.shop-menu-child{grid-template-columns:22px minmax(150px,1fr) 104px}
.login-slide-thumb{width:115px;height:68px}
.item-image-viewer{padding:10px}.item-image-viewer-card{max-width:100%;max-height:96vh}
.toast-wrap{bottom:12px;width:calc(100vw - 20px)}.toast{max-width:100%;width:auto}
}
@media(max-width:560px){
.globalbar .gb-right .gb-btn{display:none}
.globalbar .gb-kbd{display:none}
.stats{grid-template-columns:1fr 1fr}.stat .extra{font-size:11px}
.flow{grid-template-columns:1fr}
.topbar .actions{display:grid;grid-template-columns:1fr 1fr}.topbar .actions>*{width:100%}
.content{padding-left:8px;padding-right:8px}
.entry-page{padding:11px}
.user-access-grid{grid-template-columns:1fr}
.radio-row{height:auto;flex-wrap:wrap}
.segbar{width:100%;overflow-x:auto}.seg{flex:0 0 auto;padding:7px 10px}
.img-upload-row{height:auto;flex-wrap:wrap}
.auth-side{padding:12px}.auth-login-card{padding:24px 20px;border-radius:12px}.auth-login-card h2{font-size:22px}
.modal-foot{position:sticky;bottom:0}
}
/* --- Next Style Block --- */
.side-foot,.side-foot .sf-sub,.auth-login-card .sub-line{color:#4a4a4a!important}.sf-builder [onclick^="sfFeature("]{display:none!important}.perm-table{min-width:1180px!important;table-layout:auto!important}
.b-amber{background:#fef3c7!important;color:#92400e!important;border:1px solid #fde68a}