:root{
  --bg:#070708;
  --bg-soft:#101012;
  --panel:#141416;
  --panel-2:#19191c;
  --line:#2d2d33;
  --line-soft:#242429;
  --text:#f5f7fb;
  --muted:#9da3b3;
  --muted-2:#707788;
  --accent:#EC1E24;
  --accent-2:#ff4d56;
  --accent-soft:rgba(236,30,36,.16);
  --green:#34d17b;
  --orange:#ffb84d;
  --blue:#71a7ff;
  --red:#ff6e77;
  --danger:#ff545f;
  --shadow:0 18px 50px rgba(0,0,0,.28);
  --radius:18px;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;font-family:'Prompt','Noto Sans Thai',system-ui,sans-serif;background:radial-gradient(circle at 100% 0, rgba(236,30,36,.16), transparent 22%),linear-gradient(180deg,#09090a 0,#080809 100%);color:var(--text);font-size:14px}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
img{max-width:100%;display:block}
.hidden{display:none!important}
.app-shell{min-height:100vh}
.main{margin-left:236px;min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:236px;background:linear-gradient(180deg,#0f0f11,#09090a);border-right:1px solid var(--line);padding:22px 15px;display:flex;flex-direction:column;z-index:30}
.brand{display:flex;gap:12px;align-items:center;padding:4px 8px 24px}
.brand-mark{width:46px;height:46px;border-radius:14px;background:#fff;display:grid;place-items:center;overflow:hidden;box-shadow:0 0 25px rgba(236,30,36,.18)}
.brand-mark img{width:100%;height:100%;object-fit:cover}
.brand strong{font-size:20px;letter-spacing:.08em}
.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:.18em}
.nav-list{display:grid;gap:8px}
.nav-item{display:flex;align-items:center;gap:11px;padding:12px;border-radius:14px;color:#c7cddb;border:1px solid transparent}
.nav-item span{width:24px;text-align:center;font-size:18px}
.nav-item:hover{background:#19191d;border-color:#2b2b31;color:#fff}
.nav-item.active{background:linear-gradient(90deg, rgba(236,30,36,.18), rgba(236,30,36,.05));border-color:rgba(236,30,36,.28);color:#fff}
.sidebar-foot{margin-top:auto;padding:15px 8px;color:var(--muted)}
.sidebar-foot small{font-size:10px}
.status-dot{display:flex;align-items:center;gap:7px;margin-bottom:4px}.status-dot i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.topbar{height:82px;border-bottom:1px solid var(--line);background:rgba(8,8,10,.86);backdrop-filter:blur(16px);position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:12px 26px}
.topbar-left{display:flex;align-items:center;gap:12px}.topbar h1{font-size:20px;margin:0}.topbar p{margin:3px 0 0;color:var(--muted);font-size:11px}.topbar-actions{display:flex;gap:10px;align-items:center}
.actor-mini{border:1px solid var(--line);background:#101014;border-radius:12px;padding:6px 10px;display:flex;align-items:center;gap:8px}.actor-mini span{color:var(--muted);font-size:10px}.actor-mini input{width:135px;background:transparent;border:0;outline:0;color:#fff}
.content{padding:22px 26px 40px}.footer{padding:16px 26px 28px;color:#7a818f;font-size:10px}
.primary-btn,.ghost-btn,.icon-btn,.mini-btn,.quick-btn,.thumb-button{border:0;cursor:pointer;transition:.18s}
.primary-btn{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-weight:700;border-radius:12px;padding:10px 15px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 9px 24px rgba(236,30,36,.23)}
.primary-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.primary-btn.wide{min-width:170px}
.ghost-btn,.icon-btn,.mini-btn{background:#17171b;border:1px solid var(--line);color:#f0f3f8;border-radius:12px;padding:9px 14px;display:inline-flex;align-items:center;justify-content:center}
.ghost-btn:hover,.icon-btn:hover,.mini-btn:hover{background:#1d1d22}
.mini-btn{padding:7px 11px;font-size:12px}.mini-btn.in{border-color:rgba(52,209,123,.28)}.mini-btn.out{border-color:rgba(113,167,255,.25)}.mini-btn.damaged{border-color:rgba(255,110,119,.25)}
.icon-btn{min-width:40px;height:40px;padding:0;position:relative}.notification-badge{position:absolute;right:-4px;top:-5px;background:var(--accent);color:#fff;border-radius:999px;font-size:9px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center}
.panel{background:linear-gradient(145deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}.panel-head h2{margin:3px 0 0;font-size:22px}.panel-head p{margin:5px 0 0;color:var(--muted)}.eyebrow{display:block;color:#ff8e93;font-size:10px;letter-spacing:.18em;text-transform:uppercase}.text-link{color:#ff979c;font-size:12px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.kpi-card{background:linear-gradient(145deg,#161619,#121215);border:1px solid var(--line);border-radius:16px;padding:15px 16px;min-height:112px;position:relative;overflow:hidden}.kpi-card:after{content:'';position:absolute;width:80px;height:80px;border-radius:50%;right:-25px;top:-25px;background:rgba(236,30,36,.08)}.kpi-card span{color:#b6bccb;font-size:11px}.kpi-card strong{display:block;font-size:25px;margin:9px 0 2px}.kpi-card small{color:var(--muted-2);font-size:10px}.kpi-card.warning strong{color:var(--orange)}.kpi-card.danger strong,.kpi-card.danger-soft strong{color:var(--red)}.kpi-card.success strong{color:var(--green)}.kpi-card.info strong{color:var(--blue)}.kpi-card.value strong{font-size:20px}
.dashboard-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:15px;margin-top:15px}.dashboard-grid.lower{grid-template-columns:1fr 1fr}
.activity-list,.alert-products,.notification-list,.category-summary{display:grid;gap:10px}.activity-row,.alert-product,.notification-row{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line-soft);background:#111114;border-radius:14px}.activity-main{flex:1}.activity-main small,.alert-product small,.notification-row small{display:block;color:var(--muted);margin-top:4px}.activity-stock{text-align:right}.activity-stock small{display:block;color:var(--muted);margin-top:4px}.category-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.category-card{display:block;padding:14px;border:1px solid var(--line-soft);border-radius:14px;background:#111114}.category-card span{font-size:12px;color:#fff}.category-card strong{display:block;margin-top:6px;font-size:20px}.category-card small{display:block;margin-top:5px;color:var(--muted)}
.quick-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.quick-btn{padding:14px;border-radius:14px;border:1px solid var(--line);background:#111114;color:#fff;text-align:left}.quick-btn b{display:block}.quick-btn span{display:block;color:var(--muted);margin-top:4px;font-size:12px}.quick-btn.in{border-color:rgba(52,209,123,.28)}.quick-btn.out{border-color:rgba(113,167,255,.28)}.quick-btn.damaged{border-color:rgba(255,110,119,.28)}
.filter-panel{margin-bottom:14px}.filter-form{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.field{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:12px;min-width:0}.field span{color:#cfd4df}.field i{color:#ff8e93;font-style:normal}.field input,.field select,.field textarea{background:#0f0f12;border:1px solid var(--line);border-radius:12px;color:#fff;padding:10px 12px;outline:0}.field textarea{resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(236,30,36,.45);box-shadow:0 0 0 3px rgba(236,30,36,.12)}.field.compact{min-width:170px}.field.compact.grow,.grow{flex:1 1 270px}.field.emphatic input{border-color:rgba(236,30,36,.25)}
.field-grid{display:grid;gap:12px}.field-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.field-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.field-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.product-form{display:grid;gap:12px}.compact-form{margin-bottom:14px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:2px}.form-actions.split{justify-content:space-between}.left-actions,.right-actions,.separate-row-actions{display:flex;gap:10px;flex-wrap:wrap}.separate-row-actions{margin-top:10px;justify-content:flex-end}
.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:separate;border-spacing:0 10px}.data-table thead th{font-size:12px;color:#bac0ce;text-align:left;padding:0 12px 4px}.data-table td{padding:10px 12px;background:#111114;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);vertical-align:middle}.data-table td:first-child{border-left:1px solid var(--line-soft);border-radius:14px 0 0 14px}.data-table td:last-child{border-right:1px solid var(--line-soft);border-radius:0 14px 14px 0}.right{text-align:right}
.product-cell{display:flex;align-items:center;gap:10px}.sku-main small,.product-cell small{display:block;color:var(--muted);margin-top:3px}.muted-line{display:block;color:var(--muted);margin-top:4px;font-size:11px}
.product-thumb{width:44px;height:44px;border-radius:12px;background:#1d1d21;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;padding:0;color:#fff}.product-thumb.small{width:36px;height:36px}.product-thumb.tiny{width:32px;height:32px}.product-thumb img{width:100%;height:100%;object-fit:cover}.thumb-button{background:transparent}.thumb-inline{width:72px;height:72px;border-radius:14px;border:1px solid var(--line);overflow:hidden;background:#111114;padding:0}.current-image-box{display:flex;align-items:center;gap:12px;color:var(--muted);margin-top:4px}
.category-pill,.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;font-size:11px;border:1px solid var(--line)}.category-pill{background:#18181c;color:#fff}.badge.success{background:rgba(52,209,123,.10);color:#87efb3;border-color:rgba(52,209,123,.25)}.badge.warning{background:rgba(255,184,77,.10);color:#ffd08a;border-color:rgba(255,184,77,.25)}.badge.danger{background:rgba(255,110,119,.12);color:#ffb1b7;border-color:rgba(255,110,119,.25)}.badge.info{background:rgba(113,167,255,.12);color:#b7d1ff;border-color:rgba(113,167,255,.25)}.badge.muted{background:#18181c;color:#b9bfcd;border-color:#2c2c33}
.row-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.delta.plus{color:var(--green)}.delta.minus{color:#ff9ca3}.stock-number{font-size:18px}.stock-preview{border:1px solid var(--line);border-radius:14px;background:#101014;padding:12px}.stock-preview span{color:var(--muted);font-size:11px}.stock-preview strong{display:block;font-size:22px;margin-top:4px}.stock-preview small{color:var(--muted);display:block;margin-top:4px}
.alert-product{justify-content:space-between}.stock-count{text-align:right}.stock-count strong{display:block;font-size:22px}.stock-count span{font-size:11px}.stock-count.success strong{color:var(--green)}.stock-count.warning strong{color:var(--orange)}.stock-count.danger strong{color:var(--red)}
.archived-row td{opacity:.66}.empty-state{padding:28px;text-align:center;color:var(--muted)}.empty-state.good{color:#8fe4ac}
.flash{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;margin-bottom:14px;border:1px solid var(--line)}.flash.success{background:rgba(52,209,123,.08);border-color:rgba(52,209,123,.18)}.flash.danger{background:rgba(255,110,119,.08);border-color:rgba(255,110,119,.18)}.flash b{min-width:56px}.flash span{flex:1}.flash button{background:none;border:0;color:inherit;font-size:18px;cursor:pointer}
.tabs{display:flex;gap:8px;margin-bottom:14px}.tabs a{padding:10px 14px;border-radius:12px;background:#111114;border:1px solid var(--line);color:#dbe1ec}.tabs a.active{background:rgba(236,30,36,.14);border-color:rgba(236,30,36,.28);color:#fff}
.pagination{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-top:14px}.pagination a,.pagination span{padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:#111114}.pagination a.active{background:rgba(236,30,36,.14);border-color:rgba(236,30,36,.28)}
.settings-grid,.product-page-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.info-list{display:grid;gap:10px}.info-list>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft)}.callout{margin-top:18px;padding:12px 14px;border-radius:14px;border:1px solid var(--line-soft);background:#111114}.callout.warning{border-color:rgba(255,184,77,.24)}.callout b{display:block;margin-bottom:6px}.switch-row,.check-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--line-soft);border-radius:14px;background:#111114}.compact-switch{padding:10px 12px}.switch-row small{display:block;color:var(--muted);margin-top:4px}.section-title{margin:6px 0 2px;font-size:15px}
.notification-list.full{gap:12px}.notification-row{align-items:flex-start}.notification-row.level-danger{border-color:rgba(255,110,119,.24)}.notification-row.level-warning{border-color:rgba(255,184,77,.24)}.notification-row.level-success{border-color:rgba(52,209,123,.24)}.notification-icon{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:#fff;font-weight:700;flex:0 0 auto}
.notification-popover{position:fixed;right:135px;top:70px;width:340px;max-height:430px;overflow:auto;background:#111114;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);z-index:80;padding:10px}.popover-head{display:flex;justify-content:space-between;padding:5px 5px 9px;border-bottom:1px solid var(--line);font-size:10px}.popover-head a{color:#ff979c}.empty-mini{padding:12px;color:var(--muted);text-align:center}
.toast-stack{position:fixed;right:18px;bottom:18px;display:grid;gap:8px;z-index:90}.toast{min-width:260px;max-width:360px;padding:12px 14px;border-radius:14px;background:#111114;border:1px solid var(--line);box-shadow:var(--shadow);animation:toastin .18s ease-out}.toast b{display:block}.toast span{display:block;color:#c3cad8;font-size:12px;margin-top:4px}.toast.success{border-color:rgba(52,209,123,.25)}.toast.danger{border-color:rgba(255,110,119,.25)}@keyframes toastin{from{transform:translateY(8px);opacity:0}}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.66);display:grid;place-items:center;z-index:110;padding:18px}.modal-card{width:min(680px,100%);background:linear-gradient(145deg,#161619,#101013);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.transaction-modal-card{padding:18px}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}.modal-head.compact{padding:14px 16px 0;margin-bottom:10px}.transaction-types{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}.tx-type{padding:12px;border-radius:14px;border:1px solid var(--line);background:#111114;color:#fff;text-align:left}.tx-type small{display:block;color:var(--muted);margin-top:4px}.tx-type.active{background:rgba(236,30,36,.12);border-color:rgba(236,30,36,.28)}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
.image-lightbox-card{width:min(900px,100%);padding:0 0 14px}.image-lightbox-body{padding:0 16px 8px;display:grid;place-items:center}.image-lightbox-body img{max-height:min(70vh,760px);width:auto;border-radius:16px}.lightbox-caption{padding:0 16px;color:var(--muted);font-size:12px}
.category-manager-list{display:grid;gap:10px}.category-block{display:grid;gap:8px;padding:12px;border:1px solid var(--line-soft);background:#111114;border-radius:14px}.category-row{display:flex;justify-content:space-between;gap:10px;align-items:end}.category-row-main{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;flex:1}.category-row-actions{display:flex;gap:8px;align-items:center}.inline-form{display:inline-flex}.danger-text{color:#ff9ca3}.actions-col{min-width:190px}.nowrap{white-space:nowrap}.mobile-only{display:none}
.error-panel{text-align:center;padding:50px}.error-panel>strong{font-size:64px;color:#ff8e93}.error-panel pre{white-space:pre-wrap;color:var(--muted);font-size:10px}
@media (max-width:1180px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.dashboard-grid.lower,.settings-grid,.product-page-grid{grid-template-columns:1fr}.field-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.field-grid.three{grid-template-columns:1fr 1fr 1fr}.category-row-main{grid-template-columns:1fr 1fr 1fr}.category-summary{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.sidebar{transform:translateX(-101%);transition:.2s}.sidebar.open{transform:translateX(0)}.main{margin-left:0}.mobile-only{display:inline-grid;place-items:center}.topbar{padding:10px 13px}.topbar p{display:none}.actor-mini{display:none}.content{padding:14px}.kpi-grid{grid-template-columns:repeat(2,1fr);gap:9px}.dashboard-grid,.dashboard-grid.lower,.settings-grid,.product-page-grid,.field-grid.two,.field-grid.three,.field-grid.four,.category-summary,.quick-buttons,.transaction-types,.category-row-main{grid-template-columns:1fr}.filter-form>*{flex:1 1 140px}.topbar-actions .primary-btn{font-size:0;padding:10px 12px}.topbar-actions .primary-btn:after{content:'+';font-size:17px}.notification-popover{right:12px;top:70px;width:calc(100vw - 24px)}.modal-card{max-height:92vh;overflow:auto}.row-actions,.separate-row-actions,.form-actions{justify-content:flex-start}}

/* V0.3.0 SKU-first UX */
.sku-fast-finder{position:relative;width:260px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#101014;border-radius:12px;padding:0 10px;height:40px}.sku-fast-icon{color:#ff8e93;font-size:18px}.sku-fast-finder input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff}.sku-fast-results{position:absolute;right:0;top:47px;width:390px;max-height:420px;overflow:auto;background:#111114;border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);padding:8px;z-index:95}.sku-fast-result{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:9px;border-radius:11px}.sku-fast-result:hover{background:#1a1a1f}.sku-fast-result>span:nth-child(2){min-width:0}.sku-fast-result b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sku-fast-result small{display:block;color:var(--muted);font-size:10px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sku-fast-result>strong{color:#fff;font-size:16px}.sku-fast-thumb{width:34px;height:34px;border-radius:9px;overflow:hidden;background:#1d1d21;display:grid;place-items:center}.sku-fast-thumb img{width:100%;height:100%;object-fit:cover}.sku-fast-empty{padding:16px;text-align:center;color:var(--muted)}
.sku-line{display:flex;align-items:center;gap:7px}.copy-sku{width:25px;height:25px;border:1px solid var(--line);border-radius:8px;background:#17171b;color:#ff9ca3;cursor:pointer;display:inline-grid;place-items:center;font-size:12px}.copy-sku:hover{background:var(--accent-soft);border-color:rgba(236,30,36,.32)}
.actor-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:3px}.actor-chip{border:1px solid var(--line);background:#17171b;color:#dce1eb;border-radius:999px;padding:5px 9px;font-size:10px;cursor:pointer}.actor-chip:hover{border-color:rgba(236,30,36,.32);background:var(--accent-soft)}
.tx-product-field{position:relative}.tx-product-results{position:absolute;left:0;right:0;top:65px;max-height:310px;overflow:auto;background:#0e0e11;border:1px solid var(--line);border-radius:14px;padding:7px;z-index:8;box-shadow:var(--shadow)}.tx-product-option{width:100%;display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;border:0;background:transparent;color:#fff;text-align:left;padding:8px;border-radius:10px;cursor:pointer}.tx-product-option:hover{background:#1b1b20}.tx-result-thumb{width:36px;height:36px;border-radius:10px;background:#1d1d21;display:grid;place-items:center;overflow:hidden}.tx-result-thumb img{width:100%;height:100%;object-fit:cover}.tx-result-main{min-width:0}.tx-result-main b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tx-result-main small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.tx-product-empty{padding:16px;text-align:center;color:var(--muted)}.tx-selected-product{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;margin:12px 0;padding:11px;border:1px solid rgba(236,30,36,.22);background:rgba(236,30,36,.06);border-radius:14px}.tx-selected-image{width:50px;height:50px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#1c1c20;color:#fff;display:grid;place-items:center;padding:0}.tx-selected-image img{width:100%;height:100%;object-fit:cover}.tx-selected-product span{display:block;color:#ff9ca3;font-size:9px;letter-spacing:.08em}.tx-selected-product b{display:block;margin-top:2px}.tx-selected-product small{display:block;color:var(--muted);margin-top:3px}
.lightbox-toolbar{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 16px 10px}.lightbox-toolbar span{min-width:55px;text-align:center;color:#d9deea;font-size:12px}.image-lightbox-body{overflow:auto;min-height:220px;max-height:72vh;background:#09090b;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:18px}.image-lightbox-body img{transition:transform .12s ease;transform-origin:center center;max-width:100%;max-height:68vh;object-fit:contain}.remove-image-check{display:flex!important;align-items:center;gap:7px;margin-top:6px;color:#ff9ca3!important;font-size:11px!important}.remove-image-check input{width:auto!important}.category-usage{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:7px;border-bottom:1px solid var(--line-soft)}.category-usage span{color:var(--muted);font-size:10px}
@media(max-width:1300px){.sku-fast-finder{width:210px}.actor-mini{display:none}}
@media(max-width:900px){.sku-fast-finder{display:none}.tx-selected-product{grid-template-columns:46px 1fr}.tx-selected-product .mini-btn{grid-column:1/-1}.tx-product-results{position:static;margin-top:6px;max-height:250px}}

/* V0.3.3 Notification bell history */
.notification-popover .notification-row{position:relative;padding:10px;margin-top:7px}
.notification-popover .notification-copy{min-width:0;flex:1}
.notification-title-line{display:flex;align-items:center;gap:7px;justify-content:space-between}
.notification-title-line b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notification-new-label{flex:0 0 auto;background:var(--accent);color:#fff;border-radius:999px;padding:2px 6px;font-size:8px;font-weight:700}
.notification-row.is-new{border-color:rgba(236,30,36,.42);box-shadow:inset 3px 0 0 var(--accent)}
.notification-popover .notification-row p{margin:4px 0 0;color:#d4d8e2;font-size:10px;line-height:1.45}
.notification-popover .notification-row small{font-size:9px}

/* V0.4.0 Password Gate */
.logout-form{margin-top:14px}.logout-btn{width:100%;border:1px solid rgba(236,30,36,.25);background:rgba(236,30,36,.08);color:#ffadb0;border-radius:11px;padding:9px 10px;font:inherit;font-size:11px;cursor:pointer;transition:.18s}.logout-btn:hover{background:rgba(236,30,36,.16);color:#fff}
.login-body{min-height:100vh;background:radial-gradient(circle at 50% -15%,rgba(236,30,36,.24),transparent 34%),linear-gradient(180deg,#0b0b0d,#060607);display:grid;place-items:center;padding:24px}.access-shell{width:100%;display:grid;place-items:center}.access-card{width:min(470px,100%);background:linear-gradient(145deg,#17171a,#0f0f11);border:1px solid #303036;border-radius:24px;padding:28px;box-shadow:0 28px 90px rgba(0,0,0,.46)}.access-brand{display:flex;align-items:center;gap:12px;margin-bottom:30px}.access-logo{width:54px;height:54px;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 30px rgba(236,30,36,.18)}.access-logo img{width:100%;height:100%;object-fit:cover}.access-brand strong{display:block;font-size:22px;letter-spacing:.08em}.access-brand small{display:block;color:#9da3b3;font-size:9px;letter-spacing:.2em}.access-heading h1{font-size:26px;margin:5px 0 6px}.access-heading p{margin:0 0 22px;color:#9da3b3}.access-form{display:grid;gap:14px}.access-password-field{gap:8px}.password-input-wrap{position:relative}.password-input-wrap input{width:100%;padding-right:68px;min-height:48px}.password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);border:1px solid #303036;background:#18181c;color:#d9dde6;border-radius:9px;padding:7px 10px;font:inherit;font-size:11px;cursor:pointer}.access-submit{width:100%;min-height:48px;font-size:14px}.access-submit:disabled,.access-password-field input:disabled{opacity:.5;cursor:not-allowed}.access-alert{display:grid;gap:4px;padding:12px 14px;border-radius:13px;margin-bottom:16px;border:1px solid rgba(255,110,119,.28);background:rgba(255,110,119,.08)}.access-alert b{color:#ffd3d5}.access-alert span{color:#d2d5dd;font-size:12px}.access-alert code{color:#fff;background:#232328;padding:2px 5px;border-radius:5px}.access-note{display:flex;gap:10px;align-items:flex-start;margin-top:22px;padding:12px;border-radius:13px;border:1px solid #29292f;background:#111114}.access-note>span{font-size:16px}.access-note p{margin:0;color:#9da3b3;font-size:11px;line-height:1.7}.access-card footer{margin-top:22px;padding-top:15px;border-top:1px solid #29292f;color:#717785;font-size:10px;text-align:center}
@media(max-width:520px){.login-body{padding:14px}.access-card{padding:22px;border-radius:20px}.access-heading h1{font-size:22px}}

/* V0.5.0 Stock Operations & Safety */
.sidebar{overflow-y:auto}.nav-list{flex:0 0 auto}.sidebar-foot{flex:0 0 auto}
.operations-hero{margin-bottom:14px}.operation-intro{display:flex;align-items:center;justify-content:space-between;gap:18px}.operation-intro h2{margin:4px 0}.operation-intro p{color:var(--muted);max-width:850px}.operation-links,.head-actions{display:flex;gap:8px;flex-wrap:wrap}
.batch-form{display:grid;gap:16px}.batch-list-head{display:flex;justify-content:space-between;align-items:end;gap:12px;padding-top:4px}.batch-list-head h3{margin:3px 0 0}.batch-rows{display:grid;gap:9px}.batch-row{display:grid;grid-template-columns:34px minmax(260px,1fr) 120px 42px;gap:10px;align-items:end;padding:12px;border:1px solid var(--line-soft);border-radius:14px;background:#111114}.batch-index{width:30px;height:30px;border-radius:10px;background:var(--accent-soft);color:#ffb8bb;display:grid;place-items:center;font-weight:700;margin-bottom:5px}.batch-qty{min-width:0}.batch-remove:disabled{opacity:.3;cursor:not-allowed}
.count-meta{margin-bottom:14px}.count-table-wrap{max-height:68vh}.count-table{min-width:850px}.count-input{width:110px!important;text-align:right;padding:8px 10px!important}.count-diff{font-size:16px}.count-diff.plus{color:var(--green)}.count-diff.minus{color:#ff969c}.count-diff.neutral{color:var(--muted)}.count-summary{margin-top:12px;padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:#101013;color:#cfd4df}
.detail-toolbar{display:flex;justify-content:space-between;gap:10px;margin-bottom:14px}.transaction-detail-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:15px}.transaction-product-card{display:flex;align-items:center;gap:16px;padding:14px;border:1px solid var(--line-soft);background:#111114;border-radius:15px;margin-bottom:14px}.detail-thumb{width:86px;height:86px}.sku-line.big b{font-size:20px}.detail-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}.detail-list>div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-soft)}.detail-list>div.wide{grid-column:1/-1}.detail-list span{color:var(--muted);font-size:11px}.detail-list b{text-align:right}.undo-preview{padding:16px;border:1px solid rgba(236,30,36,.25);background:rgba(236,30,36,.07);border-radius:15px;margin-bottom:14px}.undo-preview span,.undo-preview small{display:block;color:var(--muted)}.undo-preview strong{display:block;font-size:28px;margin:7px 0}.danger-btn{background:linear-gradient(135deg,#b71319,var(--accent));box-shadow:0 9px 24px rgba(236,30,36,.28)}.callout.success{border-color:rgba(52,209,123,.25);background:rgba(52,209,123,.07)}.callout.danger{border-color:rgba(255,110,119,.28);background:rgba(255,110,119,.08)}
.compact-kpi{margin-bottom:15px}.backup-grid{align-items:start}.backup-actions{display:grid;gap:10px}.backup-action{display:block;padding:15px;border:1px solid var(--line);border-radius:14px;background:#111114}.backup-action:hover{border-color:rgba(236,30,36,.34);background:#17171b}.backup-action.primary{border-color:rgba(236,30,36,.32);background:rgba(236,30,36,.07)}.backup-action b{display:block;font-size:14px}.backup-action span{display:block;color:var(--muted);margin-top:5px;font-size:11px;line-height:1.5}.danger-zone{border-color:rgba(236,30,36,.24)}code{background:#222227;border-radius:6px;padding:2px 5px;color:#fff}
@media(max-width:1100px){.transaction-detail-grid{grid-template-columns:1fr}.operation-intro{align-items:flex-start;flex-direction:column}.batch-row{grid-template-columns:30px 1fr 110px 42px}}
@media(max-width:760px){.batch-row{grid-template-columns:30px 1fr 42px}.batch-row .batch-qty{grid-column:2/3}.batch-remove{grid-column:3/4;grid-row:1/3}.detail-list{grid-template-columns:1fr}.detail-list>div.wide{grid-column:auto}.detail-toolbar{flex-wrap:wrap}.operation-links{width:100%}.operation-links .ghost-btn{flex:1}.compact-kpi{grid-template-columns:repeat(2,1fr)}}

/* V0.6.0 Scanner, Analytics, Replenishment, QR/Barcode */
.topbar-scan-link{font-size:18px}.dashboard-insight-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0 0}.insight-card{display:block;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,#151518,#101013)}.insight-card:hover{border-color:rgba(236,30,36,.34)}.insight-card span{display:block;color:var(--muted);font-size:10px}.insight-card strong{display:block;font-size:22px;margin:5px 0}.insight-card strong.sku-insight{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.insight-card small{display:block;color:var(--muted-2);font-size:10px}.insight-card.danger strong{color:#ff9197}
.scanner-layout{display:grid;grid-template-columns:1.55fr .8fr;gap:15px}.scanner-settings{margin-bottom:14px}.scanner-input-wrap{display:grid;grid-template-columns:42px 1fr auto;gap:8px;align-items:center;padding:9px;border:1px solid rgba(236,30,36,.25);border-radius:16px;background:#0d0d10;box-shadow:inset 0 0 0 1px rgba(236,30,36,.03)}.scanner-icon{width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:#ffb8bb;display:grid;place-items:center;font-size:22px}.scanner-input-wrap input{height:44px;background:transparent;border:0;outline:0;color:#fff;font-size:15px}.scanner-hint{color:var(--muted);font-size:10px;margin:7px 2px 14px}.scanner-product-card{border:1px solid var(--line);border-radius:16px;background:#101013;min-height:130px;padding:15px;margin-bottom:14px}.scanner-product-card.empty{display:grid;place-items:center}.scanner-empty{text-align:center;color:var(--muted)}.scanner-empty b,.scanner-empty span{display:block}.scanner-empty span{margin-top:5px;font-size:11px}.scanner-product-detail{display:grid;grid-template-columns:86px 1fr auto;gap:14px;align-items:center}.scanner-product-image{width:84px;height:84px;border-radius:14px;overflow:hidden;background:#1c1c20;border:1px solid var(--line);display:grid;place-items:center}.scanner-product-image img{width:100%;height:100%;object-fit:cover}.scanner-product-info b{display:block;font-size:18px}.scanner-product-info span{display:block;color:var(--muted);margin-top:5px}.scanner-product-stock{text-align:right}.scanner-product-stock strong{display:block;font-size:32px}.scanner-product-stock small{display:block;color:var(--muted);margin-top:4px}.scanner-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}.scanner-submit{min-width:180px}.camera-frame{position:relative;aspect-ratio:4/3;background:#050506;border:1px solid var(--line);border-radius:16px;overflow:hidden}.camera-frame video{width:100%;height:100%;object-fit:cover}.camera-target{position:absolute;left:12%;right:12%;top:35%;height:30%;border:2px solid rgba(236,30,36,.8);border-radius:14px;box-shadow:0 0 0 999px rgba(0,0,0,.18)}.camera-status{padding:10px 2px;color:var(--muted);font-size:11px}.scanner-recent-panel{margin-top:15px}.scanner-recent-list{display:grid;gap:8px}.scanner-recent-row{display:grid;grid-template-columns:90px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line-soft);background:#111114;border-radius:13px}.scanner-recent-row small{color:var(--muted)}.scanner-recent-row .recent-delta.plus{color:var(--green)}.scanner-recent-row .recent-delta.minus{color:#ff969c}
.analytics-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px}.analytics-head h2{margin:4px 0}.analytics-head p{margin:4px 0 0;color:var(--muted)}.period-tabs{display:flex;gap:8px}.period-tabs a{padding:9px 13px;border-radius:11px;border:1px solid var(--line);background:#111114}.period-tabs a.active{background:var(--accent-soft);border-color:rgba(236,30,36,.35);color:#fff}.analytics-kpis{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:15px}.analytics-chart-panel{margin-bottom:15px}.daily-chart-scroll{overflow:auto;padding-bottom:5px}.daily-chart{display:grid;grid-template-columns:repeat(var(--chart-days),minmax(28px,1fr));gap:6px;min-width:max(100%,calc(var(--chart-days) * 34px));height:245px;align-items:end;padding:10px 2px 0}.daily-col{height:100%;display:grid;grid-template-rows:1fr auto;gap:6px;align-items:end}.daily-bars{height:100%;display:flex;align-items:end;justify-content:center;gap:2px;border-bottom:1px solid var(--line)}.daily-bars .bar{display:block;width:7px;min-height:2px;border-radius:4px 4px 1px 1px}.daily-bars .bar.in{background:var(--green)}.daily-bars .bar.out{background:var(--blue)}.daily-bars .bar.damaged{background:var(--red)}.daily-col>span{font-size:8px;color:var(--muted);writing-mode:vertical-rl;transform:rotate(180deg);height:42px}.analytics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.rank-list{display:grid;gap:8px}.rank-row{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--line-soft);border-radius:13px;background:#111114}.rank-no{width:28px;height:28px;border-radius:9px;background:var(--accent-soft);display:grid;place-items:center;color:#ffb8bb;font-weight:700}.rank-main{min-width:0}.rank-main b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank-main small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.rank-bar{height:5px;background:#25252a;border-radius:999px;overflow:hidden;margin-top:7px}.rank-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:inherit}.danger-list .rank-bar i{background:linear-gradient(90deg,#b71319,#ff6e77)}.actor-ranks .rank-bar i{background:linear-gradient(90deg,#6a6fff,#71a7ff)}.category-ranks .rank-bar i{background:linear-gradient(90deg,#ff6d40,#ffb84d)}
.replenish-header-fields{margin-bottom:14px}.replenish-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 12px}.compact-check{padding:8px 10px;justify-content:flex-start}.replenish-table{min-width:1050px}.replenish-recommended{color:var(--green)}.replenish-qty-input{width:95px;background:#0f0f12;border:1px solid var(--line);border-radius:10px;color:#fff;padding:8px 9px;text-align:right}.replenish-qty-input:focus{outline:0;border-color:rgba(236,30,36,.45)}
.label-page-panel{background:#f5f5f5;color:#111}.label-page-panel .panel-head h2,.label-page-panel .panel-head p{color:#111}.label-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.sku-label-card{background:#fff;border:1px solid #d7d7d7;border-radius:14px;padding:12px;color:#111;display:grid;justify-items:center;break-inside:avoid;page-break-inside:avoid}.label-brand{width:100%;display:grid;grid-template-columns:30px 1fr auto;gap:7px;align-items:center;border-bottom:1px solid #e5e5e5;padding-bottom:7px}.label-brand img{width:28px;height:28px;border-radius:7px}.label-brand span{font-weight:700;font-size:12px}.label-brand small{font-size:9px;color:#666}.label-qr img{width:132px;height:132px;margin:8px auto 3px}.label-sku{text-align:center;font-size:12px;word-break:break-all}.label-name{min-height:14px;color:#666;font-size:9px;text-align:center}.label-barcode{width:100%;display:flex;justify-content:center;margin-top:6px}.label-barcode img{max-width:100%;height:58px;object-fit:contain}
@media(max-width:1180px){.dashboard-insight-strip{grid-template-columns:repeat(2,1fr)}.scanner-layout{grid-template-columns:1fr}.analytics-kpis{grid-template-columns:repeat(2,1fr)}.label-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.dashboard-insight-strip,.analytics-kpis,.analytics-grid,.label-grid{grid-template-columns:1fr}.scanner-input-wrap{grid-template-columns:36px 1fr}.scanner-input-wrap .primary-btn{grid-column:1/-1}.scanner-product-detail{grid-template-columns:64px 1fr}.scanner-product-image{width:62px;height:62px}.scanner-product-stock{grid-column:1/-1;text-align:left;display:flex;align-items:baseline;gap:8px}.scanner-recent-row{grid-template-columns:1fr auto}.scanner-recent-row small:first-child{grid-column:1/-1}.analytics-head{align-items:flex-start;flex-direction:column}.period-tabs{width:100%}.period-tabs a{flex:1;text-align:center}}
@media print{body{background:#fff!important;color:#000!important}.sidebar,.topbar,.footer,.no-print,.notification-popover,.toast-stack,.modal-backdrop{display:none!important}.main{margin:0!important}.content{padding:0!important}.label-page-panel{border:0!important;box-shadow:none!important;padding:0!important;background:#fff!important}.label-grid{grid-template-columns:repeat(3,1fr)!important;gap:6mm}.sku-label-card{border:1px solid #bbb!important;border-radius:3mm;padding:3mm}.label-qr img{width:30mm;height:30mm}.label-barcode img{height:14mm}.sku-label-card *{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* V0.6.1 — polished sidebar scrolling */
.sidebar{
  overflow:hidden;
  overscroll-behavior:contain;
}
.sidebar .brand{
  flex:0 0 auto;
}
.sidebar .nav-list{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:2px 5px 10px 0;
  margin-right:-4px;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(236,30,36,.72) transparent;
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
}
.sidebar .nav-list::-webkit-scrollbar{
  width:7px;
}
.sidebar .nav-list::-webkit-scrollbar-track{
  background:transparent;
  border-radius:999px;
}
.sidebar .nav-list::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(236,30,36,.95),rgba(148,18,23,.82));
  border:2px solid transparent;
  background-clip:padding-box;
  border-radius:999px;
  min-height:42px;
}
.sidebar .nav-list::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#ff4148,#EC1E24);
  border:1px solid transparent;
  background-clip:padding-box;
}
.sidebar .nav-list::-webkit-scrollbar-corner{
  background:transparent;
}
.sidebar .sidebar-foot{
  flex:0 0 auto;
  margin-top:10px;
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.055);
  background:linear-gradient(180deg,rgba(9,9,10,0),#09090a 22%);
}
.sidebar .nav-item{
  scroll-margin-block:12px;
}
@media (max-width:760px){
  .sidebar .nav-list::-webkit-scrollbar{width:5px}
}

/* V0.7 Raw Materials / Sticker Roll */
.material-tabs{margin-bottom:14px}.raw-kpi-grid{margin-bottom:15px}.raw-material-info{margin-bottom:14px}.compact-head{margin-bottom:0}.raw-head-actions{display:flex;gap:9px;flex-wrap:wrap}.raw-material-table .raw-name{max-width:460px;white-space:normal;line-height:1.45}.raw-material-table td{vertical-align:middle}.raw-stock-cell b,.raw-stock-cell small,.raw-cost-cell b,.raw-cost-cell small{display:block}.raw-stock-cell small,.raw-cost-cell small{color:var(--muted);margin-top:4px}.negative-number{color:#ff7e86!important}.raw-actions{min-width:180px}.raw-lower-grid{grid-template-columns:1.25fr 1fr}.raw-selected-material{display:grid;gap:4px;padding:12px 14px;border:1px solid rgba(236,30,36,.24);border-radius:14px;background:rgba(236,30,36,.07);margin-bottom:12px}.raw-selected-material b{font-size:16px}.raw-selected-material span{color:#eef0f5}.raw-selected-material small{color:var(--muted)}.raw-manage-grid{align-items:start}.raw-manage-grid .category-manager-list{max-height:520px;overflow:auto;padding-right:4px}.raw-manage-grid .category-manager-list::-webkit-scrollbar{width:6px}.raw-manage-grid .category-manager-list::-webkit-scrollbar-thumb{background:rgba(236,30,36,.55);border-radius:999px}.raw-manage-grid .category-manager-list::-webkit-scrollbar-track{background:transparent}
@media(max-width:1180px){.raw-lower-grid{grid-template-columns:1fr}.raw-material-table{min-width:1150px}}
.dashboard-raw-material-panel{margin-top:15px;border-color:rgba(236,30,36,.24);background:linear-gradient(145deg,rgba(31,17,19,.98),rgba(17,15,17,.98))}.raw-dashboard-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.raw-dashboard-strip .insight-card{min-height:92px}@media(max-width:1100px){.raw-dashboard-strip{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.raw-dashboard-strip{grid-template-columns:1fr}}
.raw-notification-badge{margin-left:8px;background:rgba(236,30,36,.11);border-color:rgba(236,30,36,.25);color:#ff9da2;padding:3px 7px;font-size:9px}
.sku-fast-result.raw-result{border-left:2px solid rgba(236,30,36,.55)}.sku-fast-result.raw-result .sku-fast-thumb{background:rgba(236,30,36,.11);color:#ff9da2}

/* V0.7.1 Raw Materials: business rule is IN / OUT only. */
.raw-two-types{grid-template-columns:repeat(2,minmax(0,1fr))}
.raw-actions{grid-template-columns:repeat(2,minmax(0,1fr))}

/* V0.8.0 Raw Material Control */
.raw-in-purchase-fields{margin:4px 0 14px;padding:14px;border:1px solid rgba(236,30,36,.22);border-radius:16px;background:linear-gradient(145deg,rgba(236,30,36,.06),rgba(255,255,255,.015))}.raw-purchase-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}.raw-purchase-head b{color:#fff}.raw-purchase-head small{color:var(--muted);text-align:right}.raw-sku-link{text-decoration:none}.raw-sku-link:hover b{color:#ff7479}.compact-kpis{grid-template-columns:repeat(2,minmax(0,260px));justify-content:start}.raw-reorder-table{min-width:1050px}.raw-supplier-grid{grid-template-columns:minmax(360px,.8fr) 1.2fr;align-items:start}.raw-supplier-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.supplier-list{display:grid;gap:12px}.supplier-card{padding:14px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.018)}.supplier-card>form+form{margin-top:8px}.supplier-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;color:var(--muted);font-size:12px}.supplier-meta b{color:#fff}.material-detail-hero{display:flex;align-items:center;justify-content:space-between;gap:20px}.material-detail-main{display:flex;align-items:center;gap:16px}.detail-thumb{width:92px;height:92px;min-width:92px}.detail-thumb img{width:100%;height:100%;object-fit:cover}.material-detail-main h1{font-size:28px;margin:3px 0}.material-detail-main p{margin:0;color:var(--muted)}.detail-badges{display:flex;gap:7px;margin-top:9px}.raw-detail-kpis{margin:14px 0}.raw-detail-grid{grid-template-columns:1.35fr .65fr;align-items:start}.detail-info-list{display:grid;gap:2px}.detail-info-list>div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--border)}.detail-info-list span{color:var(--muted)}.detail-info-list b{text-align:right}.raw-history-table{min-width:1300px}.muted-line{display:block;color:var(--muted);margin-top:3px}.raw-material-table .text-link{font-weight:700}
@media(max-width:1100px){.raw-supplier-grid,.raw-detail-grid{grid-template-columns:1fr}.material-detail-hero{align-items:flex-start;flex-direction:column}.raw-supplier-summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.compact-kpis,.raw-supplier-summary{grid-template-columns:1fr}.raw-purchase-head{align-items:flex-start;flex-direction:column}.raw-purchase-head small{text-align:left}.material-detail-main{align-items:flex-start}.detail-thumb{width:74px;height:74px;min-width:74px}.material-detail-main h1{font-size:22px}}
@media print{.sidebar,.topbar,.tabs,.panel-head .ghost-btn,.raw-head-actions{display:none!important}.app-shell,.main-content{display:block!important;margin:0!important;padding:0!important}.panel{border:none!important;box-shadow:none!important}.raw-reorder-table{min-width:0!important}.data-table{font-size:10px!important}}

/* V0.8.2 — balanced 100 × 75 mm label layout */
.label-print-tip{margin:0 0 14px;padding:10px 12px;border:1px solid rgba(236,30,36,.22);border-radius:12px;background:rgba(236,30,36,.055);color:var(--muted);font-size:11px;line-height:1.65}
.label-print-tip b{color:#fff}.label-print-tip span{color:#7d8491}
.label-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.sku-label-card{box-sizing:border-box;aspect-ratio:4/3;min-width:0;padding:16px;border:1px solid #cfcfd3;border-radius:18px;background:#fff;color:#111;display:grid;grid-template-rows:auto 1fr 62px auto;gap:8px;overflow:hidden;break-inside:avoid;page-break-inside:avoid;justify-items:stretch;align-items:stretch}
.label-brand{display:grid;grid-template-columns:34px auto 1fr;align-items:center;gap:9px;min-width:0;border-bottom:1px solid #dedede;padding-bottom:7px}
.label-brand img{width:34px;height:34px;object-fit:cover;border-radius:7px}.label-brand span{font-size:17px;font-weight:900;letter-spacing:.035em;white-space:nowrap}.label-brand small{justify-self:end;max-width:100%;font-size:10px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#555}
.label-main{display:grid;grid-template-columns:minmax(118px,31%) 1fr;gap:16px;align-items:center;min-width:0;min-height:0}
.label-qr{display:grid;place-items:center;min-width:0}.label-qr img{display:block;width:min(100%,150px);aspect-ratio:1/1;height:auto;margin:0}
.label-info{display:flex;min-width:0;height:100%;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px;overflow:hidden}.label-info.no-name{justify-content:center}
.label-name{display:-webkit-box;max-width:100%;min-height:0;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#3e3e43;font-size:12px;font-weight:600;line-height:1.3;text-align:left}
.label-sku{display:block;width:100%;max-width:100%;color:#000;font-weight:900;line-height:1;letter-spacing:-.035em;white-space:nowrap;overflow:visible;text-overflow:clip;font-variant-numeric:tabular-nums;text-align:left;word-break:normal;overflow-wrap:normal}
.label-sku.sku-short{font-size:31px}.label-sku.sku-medium{font-size:25px}.label-sku.sku-long{font-size:20px}.label-sku.sku-xlong{font-size:16px;letter-spacing:-.05em}
.label-scan-caption{font-size:9px;font-weight:700;letter-spacing:.11em;color:#85858c;white-space:nowrap}
.label-barcode{display:flex;width:100%;margin:0;align-items:center;justify-content:center;min-width:0;overflow:hidden}.label-barcode img{display:block;width:100%;height:58px;object-fit:fill;margin:0}
.label-barcode-text{text-align:center;color:#2d2d31;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;font-weight:600;line-height:1;letter-spacing:.07em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1050px){.label-grid{grid-template-columns:1fr}.sku-label-card{max-width:700px;width:100%}}

@page{size:100mm 75mm;margin:0}
@media print{
  html,body{width:100mm!important;min-width:100mm!important;max-width:100mm!important;margin:0!important;padding:0!important;background:#fff!important}
  body{overflow:visible!important;font-family:'Prompt','Noto Sans Thai',Arial,sans-serif!important}
  .sidebar,.topbar,.footer,.no-print,.notification-popover,.toast-stack,.modal-backdrop{display:none!important}
  .app-shell,.main,.content{display:block!important;width:100mm!important;min-width:100mm!important;max-width:100mm!important;margin:0!important;padding:0!important}
  .label-page-panel{display:block!important;width:100mm!important;min-width:100mm!important;max-width:100mm!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important}
  .label-grid{display:block!important;width:100mm!important;margin:0!important;padding:0!important}
  .sku-label-card{
    box-sizing:border-box!important;
    width:100mm!important;height:75mm!important;min-height:75mm!important;max-height:75mm!important;
    margin:0!important;padding:3.5mm 4mm 3mm!important;border:0!important;border-radius:0!important;
    aspect-ratio:auto!important;background:#fff!important;color:#111!important;
    display:grid!important;grid-template-rows:8.5mm 33mm 13.5mm 3.5mm!important;gap:2mm!important;justify-items:stretch!important;align-items:stretch!important;
    overflow:hidden!important;break-after:page!important;page-break-after:always!important;
    -webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;
  }
  .sku-label-card:last-child{break-after:auto!important;page-break-after:auto!important}
  .label-brand{display:grid!important;grid-template-columns:8mm auto 1fr!important;gap:2mm!important;align-items:center!important;min-width:0!important;border-bottom:.25mm solid #d6d6d8!important;padding:0 0 1mm!important}
  .label-brand img{width:8mm!important;height:8mm!important;border-radius:1mm!important}.label-brand span{font-size:12.5pt!important;line-height:1!important;letter-spacing:.02em!important}.label-brand small{font-size:7.5pt!important;color:#404044!important}
  .label-main{display:grid!important;grid-template-columns:31mm 1fr!important;gap:4mm!important;align-items:center!important;min-width:0!important;min-height:0!important;overflow:hidden!important}
  .label-qr{width:31mm!important;height:31mm!important;display:grid!important;place-items:center!important}.label-qr img{width:30mm!important;height:30mm!important;max-width:none!important;margin:0!important}
  .label-info{display:flex!important;height:31mm!important;min-width:0!important;justify-content:center!important;gap:1.7mm!important;overflow:hidden!important}
  .label-name{max-width:100%!important;font-size:7.8pt!important;line-height:1.22!important;color:#343438!important;-webkit-line-clamp:2!important}
  .label-sku{display:block!important;width:100%!important;max-width:100%!important;line-height:1!important;color:#000!important;font-weight:900!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;letter-spacing:-.035em!important}
  .label-sku.sku-short{font-size:18pt!important}.label-sku.sku-medium{font-size:13.5pt!important}.label-sku.sku-long{font-size:10.7pt!important}.label-sku.sku-xlong{font-size:8.7pt!important;letter-spacing:-.055em!important}
  .label-scan-caption{font-size:5.8pt!important;letter-spacing:.09em!important;color:#707076!important}
  .label-barcode{display:flex!important;width:92mm!important;height:13.5mm!important;margin:0!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
  .label-barcode img{display:block!important;width:92mm!important;max-width:92mm!important;height:12.5mm!important;max-height:12.5mm!important;object-fit:fill!important;margin:0!important}
  .label-barcode-text{height:3.5mm!important;text-align:center!important;font-family:Arial,Consolas,monospace!important;font-size:7pt!important;font-weight:600!important;line-height:3.5mm!important;letter-spacing:.055em!important;color:#26262a!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
}

/* V0.8.3 — label selector + 5-column preview */
.label-page-panel{background:#f5f5f7;color:#111}
.label-page-panel .panel-head h2,.label-page-panel .panel-head p{color:#111}
.label-selection-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 16px}
.label-selection-actions,.label-selection-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.label-selection-summary{display:inline-flex;align-items:center;padding:10px 12px;border-radius:999px;background:#fff;border:1px solid rgba(236,30,36,.22);font-weight:700;color:#111}
.label-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:start}
.sku-label-card{position:relative;box-sizing:border-box;aspect-ratio:4/3;min-width:0;padding:52px 14px 14px;border:1px solid #d6d7dc;border-radius:20px;background:linear-gradient(180deg,#ffffff 0%,#fbfbfc 100%);color:#111;display:grid;grid-template-rows:auto 1fr 50px auto;gap:8px;overflow:hidden;break-inside:avoid;page-break-inside:avoid;justify-items:stretch;align-items:stretch;box-shadow:0 6px 24px rgba(0,0,0,.06);transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.sku-label-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.1);border-color:rgba(236,30,36,.35)}
.sku-label-card.label-selected{border-color:rgba(236,30,36,.85);box-shadow:0 0 0 3px rgba(236,30,36,.14),0 10px 26px rgba(0,0,0,.09)}
.sku-label-card.preview-hidden{display:none!important}
.label-pick{position:absolute;left:12px;right:12px;top:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;z-index:2}
.label-pick-check{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;background:#fff;border:1px solid rgba(236,30,36,.18);font-size:11px;font-weight:700;color:#111;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.label-pick-check input{width:15px;height:15px;accent-color:#EC1E24;cursor:pointer}
.label-order-badge{position:absolute;top:52px;right:12px;display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:22px;padding:0 8px;border-radius:999px;background:rgba(17,17,19,.08);font-size:11px;font-weight:800;color:#333}
.label-brand{display:grid;grid-template-columns:32px auto 1fr;align-items:center;gap:8px;min-width:0;border-bottom:1px solid #e5e6ea;padding-bottom:8px}
.label-brand img{width:32px;height:32px;object-fit:cover;border-radius:8px}
.label-brand span{font-size:15px;font-weight:900;letter-spacing:.02em;white-space:nowrap}.label-brand small{justify-self:end;max-width:100%;font-size:10px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#595962}
.label-main{display:grid;grid-template-columns:44% 1fr;gap:12px;align-items:center;min-width:0;min-height:0}
.label-qr{display:grid;place-items:center;min-width:0}.label-qr img{display:block;width:min(100%,128px);aspect-ratio:1/1;height:auto;margin:0}
.label-info{display:flex;min-width:0;height:100%;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;overflow:hidden}.label-info.no-name{justify-content:center}
.label-name{display:-webkit-box;max-width:100%;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:#4a4a50;font-size:11px;font-weight:600;line-height:1.25;text-align:left}
.label-sku{display:block;width:100%;max-width:100%;color:#000;font-weight:900;line-height:1;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;text-align:left;word-break:normal;overflow-wrap:normal}
.label-sku.sku-short{font-size:26px}.label-sku.sku-medium{font-size:22px}.label-sku.sku-long{font-size:18px}.label-sku.sku-xlong{font-size:14px;letter-spacing:-.05em}
.label-scan-caption{font-size:8px;font-weight:700;letter-spacing:.11em;color:#83838b;white-space:nowrap}
.label-barcode{display:flex;width:100%;margin:0;align-items:center;justify-content:center;min-width:0;overflow:hidden}.label-barcode img{display:block;width:100%;height:50px;object-fit:fill;margin:0}
.label-barcode-text{text-align:center;color:#2d2d31;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;font-weight:700;line-height:1;letter-spacing:.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1600px){.label-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1320px){.label-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1050px){.label-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.label-selection-toolbar{align-items:flex-start;flex-direction:column}.label-selection-meta{width:100%;justify-content:space-between}}
@media(max-width:760px){.label-grid{grid-template-columns:1fr}.sku-label-card{max-width:700px;width:100%}.label-pick{position:static;margin-bottom:4px}.label-order-badge{top:14px}}

@media print{
  .sku-label-card.print-excluded{display:none!important}
  .label-selection-toolbar{display:none!important}
  .sku-label-card{padding:3.5mm 4mm 3mm!important;box-shadow:none!important}
  .label-order-badge,.label-pick{display:none!important}
}

/* V0.8.4 — readable 5-column label preview; print layout is isolated in .label-sheet */
.label-page-panel{background:#f4f4f6!important;color:#111!important}
.label-page-panel .panel-head h2,.label-page-panel .panel-head p{color:#111!important}
.label-print-tip{color:#6f717a!important;background:#fff6f6!important;border-color:rgba(236,30,36,.24)!important}
.label-print-tip b{color:#111!important}.label-print-tip span{color:#777a84!important}
.label-selection-summary{color:#111!important;background:#fff!important}
.label-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important;align-items:start!important}
.sku-label-card{position:relative!important;display:flex!important;flex-direction:column!important;gap:9px!important;min-width:0!important;width:auto!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;margin:0!important;padding:9px!important;border:1px solid #d8d9df!important;border-radius:16px!important;background:#fff!important;color:#111!important;overflow:visible!important;box-shadow:0 5px 18px rgba(20,20,24,.07)!important;transform:none!important;transition:border-color .16s ease,box-shadow .16s ease!important}
.sku-label-card:hover{transform:none!important;border-color:rgba(236,30,36,.34)!important;box-shadow:0 8px 22px rgba(20,20,24,.1)!important}
.sku-label-card.label-selected{border-color:#EC1E24!important;box-shadow:0 0 0 2px rgba(236,30,36,.13),0 8px 22px rgba(20,20,24,.09)!important}
.sku-label-card.preview-hidden{display:none!important}
.label-card-toolbar{position:static!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;min-height:30px!important;width:100%!important}
.label-card-toolbar-right{display:flex;align-items:center;gap:6px;min-width:0}
.label-card-index{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 7px;border-radius:999px;background:#f0f1f3;color:#555861;font-size:10px;font-weight:800;line-height:1}
.label-pick-check{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:6px 8px!important;border-radius:999px!important;background:#fff!important;border:1px solid rgba(236,30,36,.24)!important;color:#16171a!important;font-size:10px!important;font-weight:800!important;line-height:1!important;box-shadow:none!important;white-space:nowrap!important}
.label-pick-check input{width:14px!important;height:14px!important;min-width:14px!important;margin:0!important;accent-color:#EC1E24!important}
.label-card-toolbar .mini-btn{min-height:26px!important;padding:5px 8px!important;border-radius:8px!important;font-size:9px!important;white-space:nowrap!important}
.label-sheet{box-sizing:border-box;position:relative;display:grid;grid-template-rows:26px minmax(0,1fr) 31px 9px;gap:5px;width:100%;aspect-ratio:4/3;padding:8px 9px 7px;border:1px solid #e0e1e5;border-radius:11px;background:#fff;color:#111;overflow:hidden}
.label-sheet .label-brand{display:grid!important;grid-template-columns:24px auto 1fr!important;align-items:center!important;gap:6px!important;min-width:0!important;width:100%!important;border-bottom:1px solid #e1e2e5!important;padding:0 0 4px!important}
.label-sheet .label-brand img{display:block!important;width:23px!important;height:23px!important;border-radius:5px!important;object-fit:cover!important}
.label-sheet .label-brand span{min-width:0!important;color:#111!important;font-size:11px!important;font-weight:900!important;line-height:1!important;letter-spacing:.01em!important;white-space:nowrap!important}
.label-sheet .label-brand small{justify-self:end!important;display:block!important;max-width:70px!important;padding:3px 5px!important;border-radius:999px!important;background:#f1f1f3!important;color:#4d5058!important;font-size:7px!important;font-weight:800!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.label-sheet .label-main{display:grid!important;grid-template-columns:74px minmax(0,1fr)!important;gap:8px!important;align-items:center!important;min-width:0!important;min-height:0!important;width:100%!important;overflow:hidden!important}
.label-sheet .label-qr{display:grid!important;place-items:center!important;width:74px!important;height:74px!important;min-width:74px!important;min-height:74px!important;overflow:hidden!important}
.label-sheet .label-qr img{display:block!important;width:72px!important;height:72px!important;max-width:72px!important;max-height:72px!important;margin:0!important;object-fit:contain!important}
.label-sheet .label-info{display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;gap:4px!important;min-width:0!important;width:100%!important;height:auto!important;overflow:hidden!important}
.label-sheet .label-name{display:-webkit-box!important;width:100%!important;max-width:100%!important;min-height:0!important;margin:0!important;color:#555861!important;font-size:8px!important;font-weight:700!important;line-height:1.22!important;text-align:left!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
.label-sheet .label-sku{display:block!important;width:100%!important;max-width:100%!important;margin:0!important;color:#050506!important;font-weight:900!important;line-height:1.06!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:normal!important;overflow-wrap:normal!important;text-align:left!important}
.label-sheet .label-sku.sku-short{font-size:15px!important}.label-sheet .label-sku.sku-medium{font-size:12px!important}.label-sheet .label-sku.sku-long{font-size:10px!important}.label-sheet .label-sku.sku-xlong{font-size:8.5px!important;letter-spacing:-.035em!important}
.label-sheet .label-scan-caption{display:block!important;color:#7a7d85!important;font-size:5.8px!important;font-weight:800!important;line-height:1!important;letter-spacing:.055em!important;white-space:nowrap!important}
.label-sheet .label-barcode{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:31px!important;min-width:0!important;margin:0!important;overflow:hidden!important}
.label-sheet .label-barcode img{display:block!important;width:100%!important;max-width:100%!important;height:29px!important;max-height:29px!important;margin:0!important;object-fit:fill!important}
.label-sheet .label-barcode-text{display:block!important;width:100%!important;height:9px!important;margin:0!important;color:#303238!important;font-family:ui-monospace,SFMono-Regular,Consolas,monospace!important;font-size:6px!important;font-weight:700!important;line-height:9px!important;letter-spacing:.025em!important;text-align:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
@media(max-width:1600px){.label-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}.label-sheet .label-main{grid-template-columns:68px minmax(0,1fr)!important}.label-sheet .label-qr{width:68px!important;height:68px!important;min-width:68px!important;min-height:68px!important}.label-sheet .label-qr img{width:66px!important;height:66px!important}}
@media(max-width:1380px){.label-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:1120px){.label-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:900px){.label-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:620px){.label-grid{grid-template-columns:1fr!important}.label-sheet{max-width:420px;margin:0 auto}.label-card-toolbar{max-width:420px;margin:0 auto}}

@page{size:100mm 75mm;margin:0}
@media print{
  html,body{width:100mm!important;min-width:100mm!important;max-width:100mm!important;margin:0!important;padding:0!important;background:#fff!important;overflow:visible!important}
  body{font-family:'Prompt','Noto Sans Thai',Arial,sans-serif!important}
  .sidebar,.topbar,.footer,.no-print,.notification-popover,.toast-stack,.modal-backdrop{display:none!important}
  .app-shell,.main,.content,.main-content{display:block!important;width:100mm!important;min-width:100mm!important;max-width:100mm!important;margin:0!important;padding:0!important}
  .label-page-panel{display:block!important;width:100mm!important;min-width:100mm!important;max-width:100mm!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important}
  .label-grid{display:block!important;width:100mm!important;margin:0!important;padding:0!important}
  .sku-label-card{display:block!important;width:100mm!important;height:75mm!important;min-height:75mm!important;max-height:75mm!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;overflow:hidden!important;break-after:page!important;page-break-after:always!important}
  .sku-label-card.print-excluded{display:none!important}
  .sku-label-card:last-child{break-after:auto!important;page-break-after:auto!important}
  .label-card-toolbar{display:none!important}
  .label-sheet{box-sizing:border-box!important;display:grid!important;grid-template-rows:8.5mm 33mm 13.5mm 3.5mm!important;gap:2mm!important;width:100mm!important;height:75mm!important;min-width:100mm!important;min-height:75mm!important;max-width:100mm!important;max-height:75mm!important;aspect-ratio:auto!important;margin:0!important;padding:3.5mm 4mm 3mm!important;border:0!important;border-radius:0!important;background:#fff!important;color:#111!important;overflow:hidden!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .label-sheet .label-brand{display:grid!important;grid-template-columns:8mm auto 1fr!important;gap:2mm!important;align-items:center!important;min-width:0!important;width:100%!important;border-bottom:.25mm solid #d6d6d8!important;padding:0 0 1mm!important}
  .label-sheet .label-brand img{width:8mm!important;height:8mm!important;max-width:8mm!important;max-height:8mm!important;border-radius:1mm!important}.label-sheet .label-brand span{font-size:12.5pt!important;line-height:1!important;letter-spacing:.02em!important;color:#111!important}.label-sheet .label-brand small{justify-self:end!important;max-width:28mm!important;padding:0!important;background:transparent!important;border-radius:0!important;font-size:7.5pt!important;line-height:1!important;color:#404044!important}
  .label-sheet .label-main{display:grid!important;grid-template-columns:31mm minmax(0,1fr)!important;gap:4mm!important;align-items:center!important;min-width:0!important;min-height:0!important;width:100%!important;overflow:hidden!important}
  .label-sheet .label-qr{display:grid!important;place-items:center!important;width:31mm!important;height:31mm!important;min-width:31mm!important;min-height:31mm!important;overflow:hidden!important}.label-sheet .label-qr img{display:block!important;width:30mm!important;height:30mm!important;max-width:30mm!important;max-height:30mm!important;margin:0!important;object-fit:contain!important}
  .label-sheet .label-info{display:flex!important;height:31mm!important;min-width:0!important;width:100%!important;justify-content:center!important;align-items:flex-start!important;gap:1.7mm!important;overflow:hidden!important}
  .label-sheet .label-name{max-width:100%!important;width:100%!important;font-size:7.8pt!important;line-height:1.22!important;color:#343438!important;-webkit-line-clamp:2!important}
  .label-sheet .label-sku{display:block!important;width:100%!important;max-width:100%!important;line-height:1!important;color:#000!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important;letter-spacing:-.035em!important}
  .label-sheet .label-sku.sku-short{font-size:18pt!important}.label-sheet .label-sku.sku-medium{font-size:13.5pt!important}.label-sheet .label-sku.sku-long{font-size:10.7pt!important}.label-sheet .label-sku.sku-xlong{font-size:8.7pt!important;letter-spacing:-.055em!important}
  .label-sheet .label-scan-caption{font-size:5.8pt!important;letter-spacing:.09em!important;color:#707076!important}
  .label-sheet .label-barcode{display:flex!important;width:92mm!important;height:13.5mm!important;margin:0!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
  .label-sheet .label-barcode img{display:block!important;width:92mm!important;max-width:92mm!important;height:12.5mm!important;max-height:12.5mm!important;object-fit:fill!important;margin:0!important}
  .label-sheet .label-barcode-text{display:block!important;width:92mm!important;height:3.5mm!important;text-align:center!important;font-family:Arial,Consolas,monospace!important;font-size:7pt!important;font-weight:600!important;line-height:3.5mm!important;letter-spacing:.055em!important;color:#26262a!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
}


/* V0.8.5 — stock / raw materials table cleanup */
.tidy-stock-table td,.tidy-raw-table td{vertical-align:middle}
.count-stack,.price-stack,.status-stack,.unit-stack{display:grid;gap:4px}
.count-stack strong,.price-stack strong{font-size:20px;line-height:1.05;color:#fff}
.count-stack small,.price-stack small,.status-stack small,.unit-stack small{color:var(--muted);font-size:11px;line-height:1.35}
.finished-count-stack strong{font-size:24px}
.status-stack .badge{justify-self:start}
.status-stack .muted-line b{color:#fff;font-weight:800}
.tidy-stock-table .sku-main,.tidy-raw-table .sku-main{display:grid;gap:4px}
.tidy-stock-table .sku-main small,.tidy-raw-table .sku-main small{margin-top:0}
.tidy-stock-table .category-pill,.tidy-raw-table .category-pill{white-space:nowrap}
.tidy-stock-table .row-actions,.tidy-raw-table .row-actions{justify-content:flex-end}
.tidy-stock-table .price-stack strong,.tidy-raw-table .price-stack strong{font-size:18px}
.raw-material-table .raw-name{max-width:420px;white-space:normal;line-height:1.45}
.dual-value-stack{display:grid;gap:6px;justify-items:end}
.dual-value-stack>div{display:grid;gap:2px;justify-items:end;padding:6px 8px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.dual-value-stack strong{font-size:16px;line-height:1.05;color:#fff}
.dual-value-stack small{font-size:11px;color:var(--muted);line-height:1.2}
.raw-balance-stack strong{font-size:24px}
.raw-cost-cell .dual-value-stack.cost strong{font-size:15px}
.unit-stack .badge{justify-self:start}
.tidy-raw-table .raw-actions{min-width:132px}
.tidy-stock-table .actions-col,.tidy-raw-table .actions-col{white-space:nowrap}
@media(max-width:1280px){.tidy-stock-table{min-width:1120px}.tidy-raw-table{min-width:1320px}}


/* V0.8.6 — exact table heading alignment + unit display */
.data-table th.center,.data-table td.center{text-align:center}
.tidy-stock-table thead th,.tidy-raw-table thead th{vertical-align:bottom;white-space:nowrap}
.tidy-stock-table td:nth-child(1),.tidy-stock-table td:nth-child(3),.tidy-stock-table td:nth-child(5),.tidy-stock-table td:nth-child(6),.tidy-stock-table td:nth-child(10){text-align:center}
.tidy-raw-table td:nth-child(1),.tidy-raw-table td:nth-child(3),.tidy-raw-table td:nth-child(4),.tidy-raw-table td:nth-child(8),.tidy-raw-table td:nth-child(9){text-align:center}
.tidy-stock-table th:nth-child(4),.tidy-stock-table th:nth-child(7),.tidy-stock-table th:nth-child(8),.tidy-stock-table th:nth-child(9),.tidy-raw-table th:nth-child(5),.tidy-raw-table th:nth-child(6),.tidy-raw-table th:nth-child(7){text-align:right}
.table-action-center{justify-content:center!important}
.center-stack{justify-items:center;text-align:center}
.target-stack{display:inline-grid;grid-template-columns:auto auto;gap:3px 10px;align-items:center;color:var(--muted);font-size:11px;line-height:1.25;text-align:left}
.target-stack b{color:#fff;font-size:12px}
.raw-value-line{display:inline-flex;align-items:baseline;justify-content:flex-end;gap:6px;white-space:nowrap}
.raw-value-line strong{font-size:24px;line-height:1;color:#fff}
.raw-value-line span{font-size:12px;color:#c8cdd8}
.raw-stock-dual>div{min-width:105px}
.tidy-raw-table .unit-stack small{margin-top:1px}
.tidy-stock-table .finished-count-stack{justify-items:end}
.tidy-stock-table .finished-count-stack small{font-size:12px;color:#c8cdd8}
@media(max-width:1380px){.tidy-stock-table{min-width:1280px}.tidy-raw-table{min-width:1240px}}

/* V0.8.7 — Full UI consistency pass */
.nav-section{display:grid;gap:6px}
.nav-section-label{display:block;padding:2px 11px 0;color:#747b8a;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.nav-group{border:1px solid transparent;border-radius:14px;overflow:hidden}
.nav-group>summary{list-style:none;display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;padding:10px 11px;border-radius:13px;color:#9299a9;cursor:pointer;user-select:none;transition:.18s}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary:hover{background:#151519;color:#fff}
.nav-group>summary .nav-group-icon{width:24px;text-align:center;font-size:15px}
.nav-group>summary b{font-size:11px;letter-spacing:.02em}
.nav-group>summary i{font-style:normal;font-size:11px;transition:transform .18s;color:#6f7685}
.nav-group[open]>summary{color:#dce1eb;background:rgba(255,255,255,.025)}
.nav-group[open]>summary i{transform:rotate(180deg)}
.nav-group-items{display:grid;gap:5px;padding:5px 0 4px 10px}
.nav-group-items .nav-item{padding:10px 10px;font-size:12px;border-radius:12px}
.nav-group-items .nav-item span{font-size:15px;width:22px}
.nav-group-items .nav-item.active{box-shadow:inset 3px 0 0 var(--accent)}
.sidebar .nav-list{gap:6px}

/* Table alignment contract: text left, quantities/money right, status/actions centered */
.data-table th.center,.data-table td.center{text-align:center}
.data-table th.right,.data-table td.right{text-align:right}
.data-table thead th{vertical-align:bottom;white-space:nowrap}
.data-table td.center .category-pill,.data-table td.center .badge{justify-content:center}
.table-action-center{justify-content:center!important}

/* Stock Count */
.count-table thead th:nth-child(1),.count-table thead th:nth-child(3){text-align:center}
.count-table td:nth-child(1),.count-table td:nth-child(3){text-align:center}
.count-cell{display:inline-grid;gap:2px;justify-items:end}
.count-cell b{font-size:18px}.count-cell small{font-size:11px;color:var(--muted)}
.count-input-wrap{display:inline-flex;align-items:center;justify-content:flex-end;gap:7px}
.count-input-wrap span{font-size:11px;color:var(--muted)}
.count-input{width:104px!important;background:#0f0f12!important;border:1px solid var(--line)!important;border-radius:10px!important;color:#fff!important;padding:8px 10px!important;text-align:right!important;outline:0!important;appearance:textfield}
.count-input:focus{border-color:rgba(236,30,36,.5)!important;box-shadow:0 0 0 3px rgba(236,30,36,.1)!important}
.count-input::-webkit-inner-spin-button,.count-input::-webkit-outer-spin-button{opacity:.35}

/* Replenishment */
.replenish-table th.center,.replenish-table td.center{text-align:center}
.replenish-table td.center .replenish-qty-input{display:inline-block}
.replenish-table input[type="checkbox"]{accent-color:var(--accent);width:16px;height:16px}

/* Material subtabs stay compact and consistent */
.material-tabs{flex-wrap:wrap}
.material-tabs a{font-size:12px;white-space:nowrap}

/* Product/material management tables */
.management-table td.center,.management-table th.center{text-align:center}
.management-table .badge,.management-table .category-pill{white-space:nowrap}

@media(max-width:760px){
  .nav-group>summary{padding:10px}
  .nav-group-items{padding-left:6px}
  .count-input-wrap{min-width:140px}
}

/* V0.9.0 — compact Thai navigation + separate shirt inventory */
.sidebar{padding-top:18px;padding-bottom:14px}
.sidebar .brand{margin-bottom:10px}
.sidebar .nav-list{gap:2px!important;padding-right:5px}
.nav-section{gap:3px!important;margin-bottom:1px}
.nav-section-label{padding:1px 10px 1px!important;font-size:8px!important;letter-spacing:.12em!important}
.nav-group{border-radius:12px!important}
.nav-group>summary{padding:8px 10px!important;gap:8px!important;border-radius:11px!important;min-height:38px}
.nav-group>summary .nav-group-icon{width:22px!important;font-size:14px!important}
.nav-group>summary b{font-size:11px!important}
.nav-group-items{gap:3px!important;padding:2px 0 3px 8px!important}
.nav-group-items .nav-item{padding:8px 9px!important;min-height:36px;font-size:11px!important;border-radius:10px!important}
.sidebar .nav-item{gap:8px}
.sidebar-foot{padding-top:10px!important}

.shirt-tabs{margin-bottom:14px;flex-wrap:wrap}
.shirt-tabs a{font-size:12px;white-space:nowrap}
.shirt-kpi-grid{margin-bottom:15px}
.shirt-dashboard-grid{grid-template-columns:1.2fr .8fr;align-items:start}
.shirt-size-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.shirt-size-card{display:grid;gap:3px;padding:14px;border:1px solid var(--line);border-radius:16px;background:#111115;text-decoration:none;color:#fff;text-align:center;transition:.16s}
.shirt-size-card:hover{border-color:rgba(236,30,36,.45);transform:translateY(-1px)}
.shirt-size-card span{font-size:9px;letter-spacing:.12em;color:var(--muted)}
.shirt-size-card strong{font-size:27px;line-height:1;color:#fff}.shirt-size-card b{font-size:15px}.shirt-size-card small{color:var(--muted);font-size:10px}
.shirt-size-pill{display:inline-flex;min-width:44px;justify-content:center;padding:7px 10px;border-radius:11px;background:rgba(236,30,36,.08);border:1px solid rgba(236,30,36,.24);font-weight:800;color:#fff}
.shirt-table{min-width:1320px}.shirt-table td{vertical-align:middle}.shirt-actions{justify-content:center!important;flex-wrap:nowrap}
.shirt-count-wrap{max-height:58vh;overflow:auto;border:1px solid var(--line);border-radius:14px}.shirt-count-input{width:110px!important}
.shirt-manage-list{display:grid;gap:10px}.shirt-manage-card{border:1px solid var(--line);border-radius:16px;background:#111115;overflow:hidden}.shirt-manage-card>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 16px;cursor:pointer}.shirt-manage-card>summary::-webkit-details-marker{display:none}.shirt-manage-card>summary>span{display:grid;gap:3px}.shirt-manage-card>summary>span:last-child{justify-items:end}.shirt-manage-card>summary small{color:var(--muted)}.shirt-manage-card>form{padding:0 16px 16px}.shirt-toggle-form{padding-top:0!important}.shirt-notification-badge{margin-left:7px;background:rgba(236,30,36,.1);border-color:rgba(236,30,36,.28);color:#ff9aa0}
@media(max-width:1180px){.shirt-dashboard-grid{grid-template-columns:1fr}.shirt-table{min-width:1200px}}

/* V0.9.1 — compact true nested sidebar */
.sidebar{
  padding:16px 13px 13px!important;
}
.sidebar .brand{
  margin:0 4px 13px!important;
  min-height:55px;
}
.sidebar .brand-mark img{width:44px;height:44px}
.sidebar .nav-list{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  align-content:flex-start!important;
  gap:3px!important;
  padding:0 5px 8px 0!important;
}
.nav-root-item{
  min-height:42px!important;
  padding:9px 10px!important;
  margin-bottom:2px;
  font-size:12px!important;
  border-radius:11px!important;
}
.nav-root-item span{width:22px!important;font-size:15px!important}
.nav-group{
  flex:0 0 auto;
  width:100%;
  border-radius:11px!important;
  overflow:visible!important;
}
.nav-group>summary{
  min-height:40px!important;
  grid-template-columns:22px minmax(0,1fr) 18px!important;
  gap:8px!important;
  padding:8px 9px!important;
  border:1px solid transparent;
  border-radius:10px!important;
  color:#aab0bd!important;
}
.nav-group>summary:hover{background:#151519!important;border-color:#26262c;color:#fff!important}
.nav-group>summary .nav-group-icon{width:22px!important;font-size:14px!important;color:#c5cad5}
.nav-group>summary b{font-size:12px!important;font-weight:700;letter-spacing:0!important;white-space:nowrap}
.nav-group>summary i{width:18px;text-align:center;font-size:10px!important;color:#697180!important}
.nav-group.group-active>summary{
  color:#fff!important;
  background:rgba(236,30,36,.07)!important;
  border-color:rgba(236,30,36,.14)!important;
}
.nav-group.group-active>summary .nav-group-icon{color:#ff7c82}
.nav-group[open]>summary{color:#fff!important;background:#141417!important}
.nav-group.group-active[open]>summary{background:rgba(236,30,36,.09)!important}
.nav-group-items{
  position:relative;
  display:flex!important;
  flex-direction:column;
  gap:2px!important;
  margin:2px 0 4px 17px!important;
  padding:2px 0 2px 10px!important;
  border-left:1px solid #292930;
}
.nav-group-items .nav-item{
  position:relative;
  min-height:34px!important;
  padding:7px 8px!important;
  gap:7px!important;
  border-radius:9px!important;
  font-size:11px!important;
  color:#9fa6b5;
}
.nav-group-items .nav-item:before{
  content:'';
  position:absolute;
  left:-11px;
  top:50%;
  width:7px;
  height:1px;
  background:#292930;
}
.nav-group-items .nav-item span{width:18px!important;font-size:12px!important;color:#7f8796}
.nav-group-items .nav-item b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-group-items .nav-item:hover{background:#16161a;color:#fff}
.nav-group-items .nav-item.active{
  background:linear-gradient(90deg,rgba(236,30,36,.15),rgba(236,30,36,.035))!important;
  border-color:rgba(236,30,36,.22)!important;
  box-shadow:none!important;
  color:#fff!important;
}
.nav-group-items .nav-item.active:after{
  content:'';
  position:absolute;
  left:-13px;
  top:50%;
  width:5px;
  height:5px;
  margin-top:-2.5px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px rgba(236,30,36,.7);
}
.nav-group-items .nav-item.active span{color:#ff8d92}
.sidebar .sidebar-foot{
  margin-top:7px!important;
  padding:10px 5px 0!important;
}
@media(max-width:760px){
  .sidebar{padding:14px 12px 12px!important}
  .nav-group-items{margin-left:15px!important}
}

/* V0.9.2 — Shirt Collection-first inventory */
.shirt-collections-panel{margin-bottom:15px}
.shirt-collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.shirt-collection-card{display:grid;grid-template-columns:118px 1fr;min-width:0;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,#111115,#151519);overflow:hidden;text-decoration:none;color:#fff;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.shirt-collection-card:hover{transform:translateY(-2px);border-color:rgba(236,30,36,.48);box-shadow:0 12px 28px rgba(0,0,0,.18)}
.shirt-collection-cover{min-height:176px;background:linear-gradient(160deg,rgba(236,30,36,.18),#0d0d10);display:grid;place-items:center;border-right:1px solid var(--line)}
.shirt-collection-cover img{width:100%;height:100%;object-fit:cover}.shirt-collection-cover span{display:grid;place-items:center;width:68px;height:68px;border-radius:20px;background:rgba(236,30,36,.13);border:1px solid rgba(236,30,36,.28);font-size:24px;font-weight:900}
.shirt-collection-body{display:grid;gap:10px;padding:15px;min-width:0}.shirt-collection-title{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.shirt-collection-title small{color:#ff858b;font-size:9px;letter-spacing:.13em}.shirt-collection-title h3{margin:2px 0 0;font-size:22px}.shirt-collection-title>span{color:#ff7379;font-size:11px;font-weight:800}
.shirt-collection-chips{display:flex;gap:7px;flex-wrap:wrap}.shirt-collection-chips span{display:inline-flex;padding:6px 9px;border-radius:999px;background:#0d0d10;border:1px solid var(--line);color:#d9dce5;font-size:10px;font-weight:700}
.shirt-collection-meta{display:grid;gap:5px;min-width:0}.shirt-collection-meta p{margin:0;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shirt-collection-meta b{color:#fff}
.shirt-collection-footer{display:grid;gap:3px;margin-top:auto;padding-top:9px;border-top:1px solid var(--line)}.shirt-collection-footer strong{font-size:18px}.shirt-collection-footer small{color:var(--muted);font-size:10px}
.shirt-collection-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}.shirt-collection-hero-main{display:flex;align-items:center;gap:16px;min-width:0}.shirt-collection-hero-cover{width:108px;height:108px;min-width:108px;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,rgba(236,30,36,.18),#0d0d10);border:1px solid var(--line);display:grid;place-items:center}.shirt-collection-hero-cover img{width:100%;height:100%;object-fit:cover}.shirt-collection-hero-cover span{font-size:28px;font-weight:900}.shirt-collection-hero h1{font-size:30px;margin:3px 0}.shirt-collection-hero p{margin:0 0 10px;color:var(--muted)}
.compact-shirt-collection-kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px}
.shirt-matrix-table{min-width:900px}.shirt-matrix-table th:first-child,.shirt-matrix-table td:first-child{position:sticky;left:0;z-index:2;background:#121216}.shirt-matrix-cell{width:100%;min-width:98px;display:grid;gap:3px;padding:9px 8px;border:1px solid var(--line);border-radius:12px;background:#101014;color:#fff;cursor:pointer}.shirt-matrix-cell strong{font-size:20px}.shirt-matrix-cell small{max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:8px}.shirt-matrix-cell.state-low{border-color:rgba(255,184,77,.35);background:rgba(255,184,77,.06)}.shirt-matrix-cell.state-out{border-color:rgba(255,110,119,.35);background:rgba(255,110,119,.06)}.shirt-matrix-cell:hover{border-color:rgba(236,30,36,.55)}.shirt-matrix-empty{color:#555}
.shirt-collection-manage-grid{display:grid;grid-template-columns:minmax(360px,.78fr) 1.22fr;gap:16px;align-items:start}.shirt-collection-create{padding:15px;border:1px solid var(--line);border-radius:16px;background:#111115}.shirt-collection-manage-list{display:grid;gap:10px}.shirt-collection-manage-card{border:1px solid var(--line);border-radius:16px;background:#111115;overflow:hidden}.shirt-collection-manage-card>summary{list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 16px;cursor:pointer}.shirt-collection-manage-card>summary::-webkit-details-marker{display:none}.shirt-collection-manage-card>summary span{display:grid;gap:3px}.shirt-collection-manage-card>summary small{color:var(--muted)}.shirt-collection-manage-card>form{padding:0 16px 16px}
.shirt-three-types{grid-template-columns:repeat(3,1fr)}
@media(max-width:1450px){.shirt-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1050px){.shirt-collection-grid,.shirt-collection-manage-grid{grid-template-columns:1fr}.compact-shirt-collection-kpis{grid-template-columns:repeat(2,1fr)}.shirt-collection-hero{align-items:flex-start;flex-direction:column}}
@media(max-width:700px){.shirt-collection-card{grid-template-columns:88px 1fr}.shirt-collection-cover{min-height:154px}.compact-shirt-collection-kpis{grid-template-columns:1fr}.shirt-collection-hero-main{align-items:flex-start}.shirt-collection-hero-cover{width:82px;height:82px;min-width:82px}.shirt-collection-hero h1{font-size:24px}}

/* V0.9.3 — compact dashboard + raw-material layout repair */
.kpi-grid{gap:10px}
.kpi-card{min-height:94px;padding:13px 15px;border-radius:15px}
.kpi-card:after{width:70px;height:70px;right:-24px;top:-24px}
.kpi-card strong{font-size:23px;margin:6px 0 1px}
.kpi-card.value strong{font-size:19px}

.dashboard-module-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.dashboard-module-panel{margin-top:0!important;padding:16px!important}
.dashboard-module-panel.dashboard-raw-material-panel{background:linear-gradient(145deg,rgba(31,17,19,.98),rgba(17,15,17,.98));border-color:rgba(236,30,36,.24)}
.module-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:13px}
.module-panel-head h1,.module-panel-head h2{margin:3px 0 3px;line-height:1.15}
.module-panel-head h1{font-size:22px}.module-panel-head h2{font-size:21px}
.module-panel-head p{margin:0;color:var(--muted);font-size:11px;line-height:1.45}
.compact-action{padding:9px 12px!important;font-size:11px!important;white-space:nowrap}
.module-stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.module-stat{display:block;min-width:0;padding:10px 11px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.018)}
.module-stat:hover{border-color:rgba(236,30,36,.35);background:rgba(236,30,36,.035)}
.module-stat span{display:block;color:var(--muted);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.module-stat strong{display:block;margin:4px 0 1px;font-size:18px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.module-stat small{display:block;color:var(--muted-2);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.module-stat.warning strong{color:var(--orange)}.module-stat.danger strong{color:#ff8991}

.raw-material-hero{padding:15px 17px;margin-bottom:10px;background:linear-gradient(145deg,rgba(31,17,19,.72),rgba(17,17,20,.98));border-color:rgba(236,30,36,.2)}
.raw-material-hero .module-panel-head{margin-bottom:0;align-items:center}
.raw-material-hero .raw-head-actions{justify-content:flex-end}
.raw-kpi-compact{margin-bottom:10px;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.raw-kpi-compact .kpi-card{min-height:86px;padding:11px 12px}
.raw-kpi-compact .kpi-card strong{font-size:19px;margin:5px 0 1px}
.raw-kpi-compact .kpi-card span{font-size:9px}.raw-kpi-compact .kpi-card small{font-size:9px;line-height:1.35}
.material-tabs{margin-bottom:10px}
.tidy-raw-table th,.tidy-raw-table td{padding-top:10px;padding-bottom:10px}
.raw-lower-grid{margin-top:12px}

@media(max-width:1500px){
  .module-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .raw-kpi-compact{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:1180px){
  .dashboard-module-grid{grid-template-columns:1fr}
  .module-stat-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:900px){
  .module-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .raw-kpi-compact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .module-panel-head{flex-direction:column;align-items:flex-start}
  .raw-material-hero .module-panel-head{align-items:flex-start}
}
@media(max-width:620px){
  .module-stat-grid{grid-template-columns:1fr 1fr}
  .raw-kpi-compact{grid-template-columns:1fr 1fr}
}

/* V0.9.4 — shirt management layout + responsive audit */
.shirt-manage-page{display:grid;gap:14px}
.shirt-manage-head{align-items:center}
.shirt-manage-head>.badge{flex:0 0 auto}
.shirt-manage-collection-layout{display:grid;grid-template-columns:minmax(420px,.92fr) minmax(480px,1.08fr);gap:14px;align-items:start}
.shirt-manage-box{min-width:0;border:1px solid var(--line);border-radius:16px;background:#111115;padding:15px}
.shirt-manage-box-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.shirt-manage-box-head>div{display:grid;gap:2px}.shirt-manage-box-head span{font-size:9px;letter-spacing:.12em;color:#ff858b}.shirt-manage-box-head b{font-size:15px}.shirt-manage-box-head small{color:var(--muted);font-size:10px;text-align:right}
.shirt-collection-create{display:grid;gap:12px}.shirt-collection-create-grid{align-items:start}
.shirt-collection-list-box{padding-bottom:12px}
.shirt-collection-manage-list{display:grid;gap:9px}
.shirt-collection-manage-card{border:1px solid var(--line);border-radius:14px;background:#0f0f12;overflow:hidden}
.shirt-collection-manage-card>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;cursor:pointer;min-height:64px}
.shirt-collection-manage-card>summary::-webkit-details-marker{display:none}
.shirt-collection-manage-card[open]>summary{background:rgba(236,30,36,.035);border-bottom:1px solid var(--line-soft)}
.shirt-manage-collection-summary{display:grid!important;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:10px;min-width:0}
.shirt-manage-collection-cover{width:44px;height:44px;border-radius:11px;overflow:hidden;background:linear-gradient(145deg,rgba(236,30,36,.13),#17171b);border:1px solid var(--line);display:grid!important;place-items:center}
.shirt-manage-collection-cover img{width:100%;height:100%;object-fit:cover}.shirt-manage-collection-cover b{font-size:13px}
.shirt-manage-collection-copy{display:grid!important;gap:3px;min-width:0}.shirt-manage-collection-copy>b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shirt-manage-collection-copy small{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shirt-manage-collection-state{display:flex!important;align-items:center;gap:8px;flex:0 0 auto}.shirt-manage-collection-state em,.shirt-variant-summary-state em{font-style:normal;color:#737b89;font-size:11px;transition:transform .15s}.shirt-collection-manage-card[open] .shirt-manage-collection-state em,.shirt-manage-card[open] .shirt-variant-summary-state em{transform:rotate(180deg)}
.shirt-manage-card-body{padding:14px;display:grid;gap:10px}.shirt-manage-card-body>form:first-child{display:grid;gap:12px}.shirt-toggle-inline{padding:10px 0 0!important;margin-top:0;border-top:1px solid var(--line-soft)}
.shirt-toggle-inline .ghost-btn{padding:8px 12px}
.shirt-collection-edit-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.shirt-collection-edit-grid .shirt-file-field{grid-column:span 2}

.shirt-variant-create-form{display:grid;gap:12px}
.shirt-form-section{padding:13px;border:1px solid var(--line-soft);border-radius:15px;background:#111115}
.shirt-form-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:11px}.shirt-form-section-head b{font-size:14px}.shirt-form-section-head small{color:var(--muted);font-size:10px;text-align:right}
.shirt-variant-identity-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.shirt-variant-stock-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.shirt-variant-edit-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.shirt-variant-edit-grid .shirt-file-field{grid-column:span 2}
.shirt-form-actions{align-items:center}

.shirt-manage-list{display:grid;gap:9px}
.shirt-manage-card{border:1px solid var(--line);border-radius:15px;background:#111115;overflow:hidden}
.shirt-manage-card>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:13px;padding:11px 13px;cursor:pointer;min-height:62px}
.shirt-manage-card>summary::-webkit-details-marker{display:none}.shirt-manage-card[open]>summary{background:rgba(236,30,36,.035);border-bottom:1px solid var(--line-soft)}
.shirt-variant-summary-main{display:grid!important;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:center;min-width:0}.shirt-variant-summary-main>span:last-child{display:grid;gap:3px;min-width:0}.shirt-variant-summary-main b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shirt-variant-summary-main small{color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shirt-variant-summary-state{display:flex!important;align-items:center;gap:9px;flex:0 0 auto}.shirt-variant-summary-state strong{font-size:14px;white-space:nowrap}

/* Dark file input across management forms */
.field input[type="file"]{padding:5px 6px;background:#0f0f12;color:#9fa6b5;min-height:42px;overflow:hidden}
.field input[type="file"]::file-selector-button{margin-right:9px;border:1px solid var(--line);border-radius:9px;background:#1a1a1f;color:#fff;padding:7px 10px;font:inherit;cursor:pointer}
.field input[type="file"]::file-selector-button:hover{background:#222228;border-color:rgba(236,30,36,.3)}

/* Table consistency audit: explicit alignment for key inventory pages */
.shirt-table th:first-child,.shirt-table td:first-child{text-align:center}
.shirt-table th:nth-child(3),.shirt-table td:nth-child(3){text-align:left}
.shirt-table th:nth-child(4),.shirt-table td:nth-child(4){text-align:left}
.shirt-table th:nth-child(7),.shirt-table td:nth-child(7){text-align:left}
.shirt-table td.right,.shirt-table th.right{text-align:right}
.shirt-table td.center,.shirt-table th.center{text-align:center}
.raw-reorder-table th:last-child,.raw-reorder-table td:last-child{text-align:center}
.replenish-table th.center,.replenish-table td.center{text-align:center}
.count-table th.right,.count-table td.right{text-align:right}

/* Better horizontal table handling on touch screens */
.table-wrap{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(236,30,36,.55) transparent}
.table-wrap::-webkit-scrollbar{height:7px}.table-wrap::-webkit-scrollbar-track{background:transparent}.table-wrap::-webkit-scrollbar-thumb{background:rgba(236,30,36,.48);border-radius:999px}.table-wrap::-webkit-scrollbar-thumb:hover{background:rgba(236,30,36,.72)}

@media(max-width:1450px){
  .shirt-manage-collection-layout{grid-template-columns:minmax(360px,.85fr) minmax(440px,1.15fr)}
  .shirt-variant-stock-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .shirt-variant-stock-grid .shirt-file-field{grid-column:span 2}
  .shirt-variant-edit-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1180px){
  .shirt-manage-collection-layout{grid-template-columns:1fr}
  .shirt-collection-edit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shirt-collection-edit-grid .shirt-file-field{grid-column:auto}
  .shirt-variant-identity-grid,.shirt-variant-stock-grid,.shirt-variant-edit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shirt-variant-stock-grid .shirt-file-field,.shirt-variant-edit-grid .shirt-file-field{grid-column:auto}
}
@media(max-width:760px){
  .tabs{flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}.tabs a{flex:0 0 auto;padding:9px 12px}
  .panel{padding:14px;border-radius:16px}
  .panel-head{flex-direction:column;align-items:flex-start}.panel-head>.badge{align-self:flex-start}
  .panel-head .row-actions,.panel-head .raw-head-actions{width:100%;justify-content:flex-start}
  .shirt-manage-collection-layout{grid-template-columns:1fr}
  .shirt-manage-box{padding:12px}
  .shirt-manage-box-head,.shirt-form-section-head{flex-direction:column;align-items:flex-start}.shirt-manage-box-head small,.shirt-form-section-head small{text-align:left}
  .shirt-collection-create-grid,.shirt-collection-edit-grid,.shirt-variant-identity-grid,.shirt-variant-stock-grid,.shirt-variant-edit-grid{grid-template-columns:1fr}
  .shirt-collection-edit-grid .shirt-file-field,.shirt-variant-stock-grid .shirt-file-field,.shirt-variant-edit-grid .shirt-file-field{grid-column:auto}
  .shirt-manage-card>summary,.shirt-collection-manage-card>summary{align-items:flex-start}
  .shirt-variant-summary-state,.shirt-manage-collection-state{align-items:flex-end;flex-direction:column;gap:5px}
  .shirt-manage-collection-copy small,.shirt-variant-summary-main small{white-space:normal;line-height:1.35}
  .shirt-manage-card-body{padding:12px}
  .shirt-form-actions,.shirt-manage-page .form-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}
  .shirt-form-actions>*:only-child,.shirt-manage-page .form-actions>*:only-child{grid-column:1/-1}
  .shirt-toggle-inline .ghost-btn{width:100%;justify-content:center}
  .filter-form{gap:8px}.filter-form .field.compact,.filter-form .field.compact.grow{flex:1 1 100%;min-width:100%}.filter-form>.primary-btn,.filter-form>.ghost-btn{flex:1 1 calc(50% - 4px)}
  .data-table thead th{font-size:11px;padding-left:10px;padding-right:10px}.data-table td{padding-left:10px;padding-right:10px}
}
@media(max-width:520px){
  .content{padding:10px}
  .panel{padding:12px;border-radius:14px}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.kpi-card{padding:11px 12px;min-height:86px}.kpi-card strong{font-size:20px}.kpi-card.value strong{font-size:16px}
  .shirt-manage-collection-summary{grid-template-columns:38px minmax(0,1fr)}.shirt-manage-collection-cover{width:38px;height:38px}
  .shirt-manage-collection-state .badge,.shirt-variant-summary-state .badge{font-size:9px;padding:5px 7px}
  .shirt-variant-summary-main{grid-template-columns:34px minmax(0,1fr)}.shirt-variant-summary-main .product-thumb{width:34px;height:34px}
  .shirt-manage-page .form-actions{grid-template-columns:1fr}
  .modal-backdrop{padding:10px}.transaction-modal-card{padding:14px}.modal-actions{display:grid;grid-template-columns:1fr 1fr}.modal-actions>*{width:100%}
}

/* V0.9.4 — audited wide tables: keep columns readable and scroll on small screens */
.management-table{min-width:1050px}
.product-management-table{min-width:1180px}
.history-stock-table{min-width:1100px}
.history-system-table{min-width:820px}
.material-lot-table{min-width:860px}
.material-timeline-table{min-width:1080px}
.shirt-count-table{min-width:820px}
.shirt-history-table{min-width:1160px}
.shirt-replenish-table{min-width:940px}

/* V0.9.4 — mobile navigation overlay */
@media(max-width:760px){
  body.mobile-nav-open{overflow:hidden}
  body.mobile-nav-open:after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.58);backdrop-filter:blur(2px);z-index:29}
  .sidebar{box-shadow:20px 0 45px rgba(0,0,0,.28)}
  .sidebar.open{transform:translateX(0)!important}
}

/* V0.9.4 — mobile header sizing */
@media(max-width:760px){
  .sidebar{width:min(82vw,280px)!important}
  .topbar{height:68px;padding:8px 10px!important;gap:8px}
  .topbar-left{gap:8px;min-width:0}.topbar-left>div{min-width:0}.topbar h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
  .topbar-actions{gap:6px}.topbar-actions .icon-btn{min-width:36px;width:36px;height:36px}.topbar-actions .primary-btn{min-width:36px;height:36px;padding:8px 10px!important}
  .mobile-only{min-width:36px!important;width:36px!important;height:36px!important}
}
@media(max-width:420px){
  .topbar h1{max-width:34vw;font-size:15px}.topbar-actions .topbar-scan-link{display:none}
}

/* =========================================================
   V0.9.5 — Full page spacing / layout consistency pass
   One shared vertical rhythm for every top-level page block.
   ========================================================= */
:root{
  --page-gap:15px;
  --page-gap-mobile:10px;
}

.content > .tabs,
.content > .panel,
.content > .kpi-grid,
.content > .dashboard-grid,
.content > .dashboard-module-grid,
.content > .dashboard-insight-strip,
.content > .settings-grid,
.content > .product-page-grid,
.content > .scanner-layout,
.content > .analytics-head,
.content > .analytics-grid,
.content > .operations-hero,
.content > .detail-toolbar,
.content > .transaction-detail-grid,
.content > .backup-stats,
.content > .shirt-manage-page,
.content > .shirt-kpi-grid {
  margin-top:0!important;
  margin-bottom:var(--page-gap)!important;
}
.content > :last-child{margin-bottom:0!important}

.page-section-block,
.raw-supplier-grid{
  margin-top:0!important;
  margin-bottom:var(--page-gap)!important;
}

.raw-supplier-grid{
  grid-template-columns:minmax(520px,1.15fr) minmax(360px,.85fr)!important;
  gap:var(--page-gap)!important;
  align-items:start!important;
}
.raw-supplier-create-panel,
.raw-supplier-summary-panel,
.raw-supplier-manage-panel{min-width:0}
.raw-supplier-create-panel .product-form{display:grid;gap:12px}
.raw-supplier-create-panel .form-actions{margin-top:0}
.raw-supplier-summary-panel .raw-supplier-summary{align-content:start}
.raw-supplier-manage-panel{clear:both}
.raw-supplier-manage-panel .panel-head{margin-bottom:12px}

.content > .panel + .panel{margin-top:0!important}
.content > .panel + .dashboard-grid,
.content > .dashboard-grid + .panel,
.content > .product-page-grid + .panel,
.content > .kpi-grid + .panel,
.content > .tabs + .dashboard-grid,
.content > .tabs + .panel,
.content > .tabs + .product-page-grid{margin-top:0!important}

.panel > form:last-child,
.panel > .supplier-list:last-child,
.panel > .table-wrap:last-child{margin-bottom:0}

@media(max-width:1180px){
  .raw-supplier-grid{grid-template-columns:1fr!important}
  .content > .tabs,
  .content > .panel,
  .content > .kpi-grid,
  .content > .dashboard-grid,
  .content > .dashboard-module-grid,
  .content > .dashboard-insight-strip,
  .content > .settings-grid,
  .content > .product-page-grid,
  .content > .scanner-layout,
  .content > .analytics-head,
  .content > .analytics-grid,
  .content > .operations-hero,
  .content > .detail-toolbar,
  .content > .transaction-detail-grid,
  .content > .backup-stats,
  .content > .shirt-manage-page,
  .content > .shirt-kpi-grid{margin-bottom:12px!important}
}

@media(max-width:760px){
  .content > .tabs,
  .content > .panel,
  .content > .kpi-grid,
  .content > .dashboard-grid,
  .content > .dashboard-module-grid,
  .content > .dashboard-insight-strip,
  .content > .settings-grid,
  .content > .product-page-grid,
  .content > .scanner-layout,
  .content > .analytics-head,
  .content > .analytics-grid,
  .content > .operations-hero,
  .content > .detail-toolbar,
  .content > .transaction-detail-grid,
  .content > .backup-stats,
  .content > .shirt-manage-page,
  .content > .shirt-kpi-grid,
  .page-section-block,
  .raw-supplier-grid{margin-bottom:var(--page-gap-mobile)!important}
  .raw-supplier-create-panel .field-grid.two{grid-template-columns:1fr!important}
  .raw-supplier-summary{grid-template-columns:1fr!important}
  .supplier-card .field-grid.four{grid-template-columns:1fr!important}
  .supplier-meta{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
  .raw-supplier-create-panel .form-actions .primary-btn{width:100%;justify-content:center}
}
@media(max-width:480px){.supplier-meta{grid-template-columns:1fr!important}}

/* V0.0.1 — Materials-only baseline */
.center{text-align:center!important}.right{text-align:right!important}.row-actions.centered{justify-content:center}.material-main-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}.material-home-split{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.material-home-card{min-height:0}.material-home-card.general{border-color:rgba(113,167,255,.2)}.material-home-card.sticker{border-color:rgba(236,30,36,.25)}.mini-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.mini-stat-grid>div{padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.018);display:grid;gap:4px}.mini-stat-grid span{color:var(--muted);font-size:11px}.mini-stat-grid b{font-size:20px}.permission-overview{margin-top:15px}.material-v001-table{min-width:1240px}.material-history-table{min-width:1450px}.material-reorder-table{min-width:1150px}.dual-value-stack.compact{gap:3px}.dual-value-stack.compact>div{padding:3px 5px;border:0;background:transparent}.material-out-field.hidden{display:none!important}.department-layout,.category-layout{grid-template-columns:minmax(520px,1.1fr) minmax(320px,.9fr);gap:15px}.department-card-list,.category-permission-list,.material-manage-list{display:grid;gap:14px}.category-permission-card{padding:16px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.018)}.category-permission-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.category-permission-head>div{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.permission-box{margin-top:12px;padding:14px;border:1px solid rgba(236,30,36,.18);border-radius:15px;background:rgba(236,30,36,.04)}.permission-box>b,.permission-box>small{display:block}.permission-box>small{color:var(--muted);margin-top:3px}.permission-check-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}.check-card{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#111116}.check-card input{accent-color:#EC1E24}.material-manage-add-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.manage-material-card{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.018);overflow:hidden}.manage-material-card summary{display:grid;grid-template-columns:minmax(260px,1.5fr) auto minmax(160px,.7fr) auto;gap:14px;align-items:center;padding:14px 16px;cursor:pointer;list-style:none}.manage-material-card summary::-webkit-details-marker{display:none}.manage-material-card summary span:first-child{display:grid;gap:3px}.manage-material-card summary small{color:var(--muted)}.manage-material-card form{border-top:1px solid var(--line);padding:16px}.field-grid.five{grid-template-columns:repeat(5,minmax(0,1fr))}.page-section-grid{gap:15px!important}.page-follow-panel{margin-top:15px!important}
/* New baseline sidebar: only two groups, compact. */
.sidebar .nav-list{gap:4px!important;padding-top:4px!important}.sidebar .nav-group{margin:0!important}.sidebar .nav-group summary,.sidebar .nav-item{min-height:40px!important}.sidebar .nav-group-items{padding-top:3px!important;padding-bottom:5px!important}.sidebar .brand{margin-bottom:8px!important}
/* Better file controls in dark UI. */
input[type=file]{color:var(--muted);font-size:12px}input[type=file]::file-selector-button{border:1px solid var(--line);background:#16161b;color:#fff;border-radius:9px;padding:7px 10px;margin-right:10px;cursor:pointer}
@media(max-width:1450px){.material-main-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.field-grid.five{grid-template-columns:repeat(3,minmax(0,1fr))}.permission-check-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){.material-home-split,.material-manage-add-grid,.department-layout,.category-layout{grid-template-columns:1fr}.field-grid.five{grid-template-columns:repeat(2,minmax(0,1fr))}.permission-check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.manage-material-card summary{grid-template-columns:1fr auto}.manage-material-card summary>span:nth-child(3),.manage-material-card summary>strong{justify-self:start}}
@media(max-width:760px){.material-main-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.mini-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.field-grid.five,.permission-check-grid{grid-template-columns:1fr}.category-permission-head{align-items:flex-start;flex-direction:column}.manage-material-card summary{grid-template-columns:1fr}.material-home-card .panel-head{align-items:flex-start;flex-direction:column}.material-home-card .panel-head .primary-btn{width:100%;text-align:center}.material-main-kpis .kpi-card{min-height:112px}.topbar-actions .primary-btn{display:none}}
@media(max-width:480px){.material-main-kpis,.mini-stat-grid{grid-template-columns:1fr}}

/* V0.0.6 — Materials CRUD + layout cleanup */
.material-create-shell{overflow:visible}
.material-create-head{align-items:flex-start;gap:18px}
.material-kind-switch{display:inline-flex;gap:8px;padding:5px;border:1px solid var(--line);border-radius:14px;background:#0f0f13;flex-wrap:wrap}
.material-kind-btn{border:1px solid transparent;background:transparent;color:var(--muted);border-radius:10px;padding:10px 14px;font:inherit;font-weight:800;cursor:pointer}
.material-kind-btn.active{background:rgba(236,30,36,.13);border-color:rgba(236,30,36,.45);color:#fff;box-shadow:inset 3px 0 0 #EC1E24}
.material-create-panel.hidden{display:none!important}
.material-editor-form{display:grid;gap:14px}
.material-form-section{padding:16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.014)}
.section-heading{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.section-heading>span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(236,30,36,.13);border:1px solid rgba(236,30,36,.28);color:#ff7479;font-weight:900}
.section-heading>div{display:grid;gap:2px}.section-heading b{font-size:14px}.section-heading small{color:var(--muted);font-size:11px}
.material-form-grid{align-items:end}
.material-admin-top-grid{grid-template-columns:minmax(560px,1.15fr) minmax(300px,.85fr);gap:15px;align-items:start}
.admin-summary-card{min-height:150px}.admin-summary-card .panel-head{margin-bottom:0}
.admin-edit-list{display:grid;gap:12px}
.admin-edit-card{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.018);overflow:hidden}
.admin-edit-card summary{list-style:none;display:grid;grid-template-columns:minmax(260px,1.4fr) auto auto auto auto;gap:14px;align-items:center;padding:14px 16px;cursor:pointer}
.admin-edit-card summary::-webkit-details-marker{display:none}.admin-edit-card summary>div{display:grid;gap:3px}.admin-edit-card summary small{color:var(--muted)}
.admin-edit-form{border-top:1px solid var(--line);padding:16px;display:grid;gap:13px;background:rgba(0,0,0,.1)}
.manage-material-card summary{grid-template-columns:minmax(320px,1.5fr) minmax(160px,.7fr) auto auto!important}
.manage-material-summary-main{display:flex!important;align-items:center;gap:10px!important}.manage-material-summary-main>div{display:grid;gap:3px}.manage-material-category{color:var(--muted)}
.manage-edit-label{justify-self:end;display:inline-flex;align-items:center;justify-content:center;padding:7px 11px;border-radius:10px;border:1px solid rgba(236,30,36,.35);color:#ff7a80;background:rgba(236,30,36,.07);font-size:11px;font-weight:800}
.manage-material-card[open] .manage-edit-label,.admin-edit-card[open] .manage-edit-label{background:rgba(236,30,36,.16);color:#fff}
.existing-material-form{padding:16px!important}
@media(max-width:1250px){.material-admin-top-grid{grid-template-columns:1fr}.admin-edit-card summary{grid-template-columns:1fr auto auto}.admin-edit-card summary>span:nth-last-child(2){display:none}.manage-material-card summary{grid-template-columns:1fr auto!important}.manage-material-category{display:none}}
@media(max-width:900px){.material-create-head{flex-direction:column}.material-kind-switch{width:100%}.material-kind-btn{flex:1}.field-grid.three,.field-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))!important}.admin-edit-card summary{grid-template-columns:1fr auto}.admin-edit-card summary>strong{display:none}}
@media(max-width:640px){.field-grid.two,.field-grid.three,.field-grid.four{grid-template-columns:1fr!important}.material-form-section{padding:12px}.admin-edit-card summary,.manage-material-card summary{grid-template-columns:1fr!important;gap:7px}.admin-edit-card summary .badge,.manage-edit-label{justify-self:start}.material-kind-switch{display:grid;grid-template-columns:1fr}.material-kind-btn{width:100%}.form-actions .primary-btn{width:100%;justify-content:center}}

/* V0.0.6 — general supplies receiving/withdrawal + department members */
.general-receive-note{display:flex;align-items:flex-start;gap:12px;margin:0 0 14px;padding:12px 14px;border:1px solid rgba(52,209,123,.28);border-radius:14px;background:rgba(52,209,123,.07)}
.general-receive-note b{color:#8ff1b7;white-space:nowrap}.general-receive-note span{color:#d7dce7;font-size:12px;line-height:1.55}.general-receive-note strong{color:#fff}
.field-help{display:block;margin-top:5px;color:var(--muted);font-size:10px;line-height:1.35}
.material-general-member-field select:disabled{opacity:.65;cursor:not-allowed}
.material-tx-modal{width:min(700px,100%)}
.department-system-note{display:grid;gap:4px;padding:13px 14px;border:1px solid rgba(236,30,36,.22);border-radius:14px;background:rgba(236,30,36,.055)}
.department-system-note b{color:#ff8e93}.department-system-note span{color:var(--muted);font-size:11px;line-height:1.5}
.department-admin-body{display:grid;gap:18px;padding-top:6px}
.department-settings-form{padding-bottom:16px;border-bottom:1px solid var(--line)}
.department-members-section{display:grid;gap:12px}
.form-section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.form-section-title b{font-size:15px;color:#fff}.form-section-title small{color:var(--muted);font-size:10px}
.department-member-add{padding:13px;border:1px solid rgba(52,209,123,.18);border-radius:14px;background:rgba(52,209,123,.035)}
.department-member-list{display:grid;gap:8px}
.department-member-row{display:grid;grid-template-columns:minmax(160px,1.2fr) minmax(110px,.7fr) minmax(120px,.7fr) minmax(120px,.7fr) 80px minmax(160px,1fr) auto;gap:8px;align-items:end;padding:10px;border:1px solid var(--line);border-radius:13px;background:#101014}
.department-member-row .field{margin:0}.department-member-row .field span{font-size:9px}.department-member-row .mini-btn{height:39px}
.image-lightbox-body img{min-width:0;min-height:0;display:block;margin:auto;background:#0d0d10}
@media(max-width:1280px){.department-member-row{grid-template-columns:repeat(3,minmax(0,1fr))}.department-member-row .field.grow{grid-column:span 2}.department-member-row .mini-btn{align-self:end}}
@media(max-width:760px){.general-receive-note{flex-direction:column;gap:5px}.department-member-row{grid-template-columns:1fr}.department-member-row .field.grow{grid-column:auto}.department-member-add .field-grid{grid-template-columns:1fr!important}.form-section-title{align-items:flex-start;flex-direction:column}}

/* V0.0.6 — transaction operator + single material editor */
.material-tx-core .field-help{display:block;margin-top:5px;color:var(--muted);font-size:11px;line-height:1.35}
.material-library-panel{overflow:hidden}.material-library-head{align-items:end}.material-manage-search{display:grid;gap:6px;min-width:280px}.material-manage-search span{font-size:11px;color:var(--muted)}.material-manage-search input{width:100%}
.material-manage-table{min-width:1120px}.material-manage-table td{vertical-align:middle}.manage-material-thumb{width:48px;height:48px;border:1px solid var(--line);border-radius:12px;background:#0f1014;display:grid;place-items:center;overflow:hidden;margin:auto}.manage-material-thumb img{width:100%;height:100%;object-fit:cover}.manage-material-thumb span{font-size:11px;color:var(--muted)}.manage-stock-mini{display:grid;gap:3px;justify-items:end}.manage-stock-mini span{white-space:nowrap;color:var(--muted);font-size:11px}.manage-stock-mini b{color:#fff;font-size:13px}
.material-edit-modal-card{width:min(1040px,calc(100vw - 28px));max-height:92vh;overflow:auto}.material-edit-overview{display:grid;grid-template-columns:150px 1fr;gap:14px;margin-bottom:14px}.material-edit-image{height:120px;border:1px solid var(--line);border-radius:16px;background:#0c0d10;display:grid;place-items:center;overflow:hidden}.material-edit-image img{width:100%;height:100%;object-fit:contain;background:#09090b}.material-edit-image span{color:var(--muted);font-size:12px}.material-edit-stock{border:1px solid rgba(236,30,36,.18);border-radius:16px;background:rgba(236,30,36,.045);padding:16px;display:grid;align-content:center;gap:4px}.material-edit-stock span,.material-edit-stock small{color:var(--muted);font-size:11px}.material-edit-stock strong{font-size:24px;color:#fff}
@media(max-width:900px){.material-library-head{align-items:stretch;flex-direction:column}.material-manage-search{min-width:0;width:100%}.material-edit-overview{grid-template-columns:110px 1fr}.material-edit-image{height:100px}}
@media(max-width:640px){.material-edit-modal-card{width:calc(100vw - 14px);max-height:96vh}.material-edit-overview{grid-template-columns:1fr}.material-edit-image{height:160px}.material-edit-stock strong{font-size:20px}}

/* V0.0.8 — management UX, per-item permissions, sticker workflow */
.material-form-meta{display:grid;grid-template-columns:minmax(260px,.65fr) 1.35fr;gap:14px;align-items:end}
.form-note-card{min-height:74px;border:1px solid rgba(236,30,36,.2);border-radius:14px;background:rgba(236,30,36,.045);padding:12px 14px;display:grid;align-content:center;gap:4px}
.form-note-card b{color:#fff}.form-note-card span{color:var(--muted);font-size:11px}
.compact-upload-section{padding-bottom:12px}
.material-list-switch{display:flex;gap:8px;overflow:auto;padding:0 0 12px;scrollbar-width:thin}
.material-list-btn{border:1px solid var(--line);background:#111115;color:var(--muted);border-radius:12px;padding:9px 13px;font:inherit;font-weight:800;cursor:pointer;white-space:nowrap}
.material-list-btn span{display:inline-grid;place-items:center;min-width:22px;height:20px;margin-left:5px;padding:0 6px;border-radius:999px;background:#202027;color:#fff;font-size:10px}
.material-list-btn.active{color:#fff;border-color:rgba(236,30,36,.45);background:rgba(236,30,36,.12);box-shadow:inset 3px 0 0 #EC1E24}
.material-list-panel.hidden{display:none!important}
.general-manage-table{min-width:1060px}.sticker-manage-table{min-width:1500px}.sticker-material-table{min-width:1580px}.general-material-table{min-width:1180px}
.sku-code{font-variant-numeric:tabular-nums;white-space:nowrap}
.manage-action-group{display:flex;gap:7px;justify-content:center;align-items:center;flex-wrap:nowrap}.manage-action-group .inline-form{margin:0}
.mini-btn.delete{border-color:rgba(255,110,119,.34);color:#ffabb1;background:rgba(255,110,119,.035)}.mini-btn.delete:hover{background:rgba(255,110,119,.11);color:#fff}
.ghost-btn.danger-text{border-color:rgba(255,110,119,.32);background:rgba(255,110,119,.035)}.ghost-btn.danger-text:hover{background:rgba(255,110,119,.11);color:#fff}
.ghost-btn:disabled,.mini-btn:disabled{opacity:.38;cursor:not-allowed;filter:saturate(.5)}
.admin-form-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:13px}
.admin-form-footer .form-actions{margin:0}.safe-delete-note{color:var(--muted);font-size:11px;line-height:1.5}
.admin-summary-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.admin-summary-metrics>div{padding:12px;border:1px solid var(--line);border-radius:13px;background:#111114;display:grid;gap:3px}.admin-summary-metrics span{color:var(--muted);font-size:10px}.admin-summary-metrics b{font-size:17px;color:#fff}
.member-row-actions{display:flex;gap:6px;align-items:end}.member-row-actions .mini-btn{min-width:58px}
.material-edit-actions{display:flex!important;align-items:center!important}.modal-action-spacer{flex:1}
.material-edit-meta-section{background:rgba(255,255,255,.012)}
.sticker-primary-section{border-color:rgba(236,30,36,.2)}
.detail-badges{flex-wrap:wrap}

@media(max-width:1100px){.material-form-meta{grid-template-columns:1fr}.sticker-primary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.admin-form-footer{align-items:flex-start;flex-direction:column}.admin-form-footer .form-actions{width:100%;justify-content:flex-end}}
@media(max-width:760px){.material-list-switch{margin-inline:-2px}.material-list-btn{flex:0 0 auto}.sticker-primary-grid{grid-template-columns:1fr!important}.material-edit-actions{flex-wrap:wrap}.material-edit-actions .modal-action-spacer{display:none}.material-edit-actions>*{flex:1}.material-edit-actions .wide{width:auto!important}.admin-summary-metrics{grid-template-columns:1fr}.member-row-actions{width:100%}.member-row-actions .mini-btn{flex:1}.manage-action-group{gap:5px}}

/* V0.0.8 — per-item departments + sticker self-withdraw rules */
.general-permission-section{border-color:rgba(113,167,255,.22)!important;background:linear-gradient(145deg,rgba(113,167,255,.05),rgba(255,255,255,.012))}
.material-all-dept-switch{margin:0 0 10px}
.material-dept-text{display:block;max-width:280px;line-height:1.45;color:#e6e8ee}
.access-badges{display:flex;justify-content:center;gap:5px;flex-wrap:wrap}
.sticker-access-rule{display:grid;grid-template-columns:minmax(220px,1fr) minmax(310px,.9fr);gap:12px;align-items:center;margin-top:12px;padding:12px 14px;border:1px solid rgba(236,30,36,.18);border-radius:14px;background:rgba(236,30,36,.04)}
.sticker-access-rule>div{display:grid;gap:3px}.sticker-access-rule>div small{color:var(--muted)}
.material-self-service-note{grid-column:1/-1}
.material-tx-core .general-receive-note{margin:0}
.sticker-material-table{min-width:1560px!important}.general-material-table{min-width:1420px!important}
.general-manage-table{min-width:1320px!important}.sticker-manage-table{min-width:1540px!important}
@media(max-width:900px){.sticker-access-rule{grid-template-columns:1fr}}

/* V0.0.9 — smart material filters + managed sticker types + compact management UX */
.material-filter-panel{padding:17px 18px;margin-bottom:14px;background:linear-gradient(145deg,rgba(20,20,24,.98),rgba(14,14,17,.98));border-color:rgba(236,30,36,.18)}
.material-filter-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:13px}.material-filter-head h2{margin:2px 0 3px;font-size:18px}.material-filter-head p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}.filter-count-badge{display:inline-flex;align-items:center;white-space:nowrap;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:#111115;color:var(--muted);font-size:10px;font-weight:700}
.material-smart-filter{display:grid;gap:10px}.material-search-field{margin:0}.material-search-field>small{color:var(--muted);font-size:10px;margin-top:5px}.search-input-shell{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:#0d0d10;transition:border-color .18s,box-shadow .18s}.search-input-shell:focus-within{border-color:rgba(236,30,36,.55);box-shadow:0 0 0 3px rgba(236,30,36,.08)}.search-input-shell>span{color:#ff666c;font-size:17px;line-height:1}.search-input-shell input{border:0!important;background:transparent!important;padding:0!important;height:auto!important;box-shadow:none!important;width:100%}
.material-filter-grid{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(170px,1fr) minmax(145px,.75fr) auto;gap:9px;align-items:end}.material-filter-grid.has-sticker-type{grid-template-columns:minmax(140px,.8fr) minmax(160px,1fr) minmax(170px,1fr) minmax(140px,.75fr) auto}.material-filter-grid .field{margin:0}.material-filter-actions{display:flex;gap:7px;align-items:end}.material-filter-actions .primary-btn,.material-filter-actions .ghost-btn{height:42px;white-space:nowrap}
.active-filter-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}.active-filter-chips>span{color:var(--muted);font-size:10px}.active-filter-chips>b{font-size:10px;font-weight:600;color:#f4f5f8;padding:5px 8px;border:1px solid rgba(236,30,36,.2);border-radius:999px;background:rgba(236,30,36,.055)}
.material-create-tools{display:grid;gap:8px;justify-items:end}.material-quick-admin{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.material-quick-admin .mini-btn{text-decoration:none;font-size:10px;padding:7px 10px}.material-create-shell .material-form-section{padding:14px}.material-create-shell .section-heading{margin-bottom:10px}.material-create-shell .material-editor-form{gap:11px}.material-create-shell textarea{min-height:72px}.material-create-shell .sticker-access-rule{margin-top:10px}
.material-library-result{display:grid;grid-template-columns:auto auto auto;align-items:baseline;gap:5px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:#101014;white-space:nowrap}.material-library-result span,.material-library-result small{color:var(--muted);font-size:10px}.material-library-result b{font-size:20px;color:#fff}.material-manage-filterbar{display:grid;grid-template-columns:minmax(260px,1.7fr) minmax(135px,.75fr) minmax(150px,.9fr) minmax(155px,.9fr) minmax(125px,.7fr) auto;gap:8px;align-items:end;margin:0 0 12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#0e0e12}.material-manage-filterbar .field{margin:0}.material-manage-filterbar .search-input-shell{height:40px}.material-manage-filterbar select{height:40px}.material-filter-reset{height:40px;white-space:nowrap}.material-manage-search{min-width:0}.material-list-switch{padding-bottom:10px}
.sticker-type-hero{margin-bottom:14px}.sticker-type-layout{display:grid;grid-template-columns:minmax(300px,.62fr) minmax(520px,1.38fr);gap:14px;align-items:start}.sticker-type-add-panel{position:sticky;top:96px}.sticker-type-form{display:grid;gap:10px}.sticker-type-list{display:grid;gap:9px}.sticker-type-card{border:1px solid var(--line);border-radius:14px;background:#101014;overflow:hidden}.sticker-type-card[data-inactive="1"]{opacity:.8}.sticker-type-card summary{list-style:none;display:grid;grid-template-columns:minmax(260px,1fr) 72px auto auto;align-items:center;gap:12px;padding:12px 14px;cursor:pointer}.sticker-type-card summary::-webkit-details-marker{display:none}.sticker-type-summary-main{display:flex;align-items:center;gap:10px;min-width:0}.sticker-type-summary-main>div{display:grid;gap:2px;min-width:0}.sticker-type-summary-main b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sticker-type-summary-main small{color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sticker-type-icon{display:grid;place-items:center;width:38px;height:38px;min-width:38px;border:1px solid rgba(236,30,36,.25);border-radius:11px;background:rgba(236,30,36,.07);color:#ff777c;font-size:10px;font-weight:800}.sticker-type-count{display:grid;justify-items:center;gap:0}.sticker-type-count strong{font-size:15px}.sticker-type-count small{font-size:9px;color:var(--muted)}.sticker-type-edit-body{padding:13px;border-top:1px solid var(--line);background:rgba(0,0,0,.12)}.sticker-type-form.edit{padding-bottom:12px}.sticker-type-actions{display:flex;justify-content:flex-end}.sticker-type-delete-form{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line)}.sticker-type-delete-form>div{display:grid;gap:2px}.sticker-type-delete-form b{font-size:11px;color:#ff9ba0}.sticker-type-delete-form small{font-size:9px;color:var(--muted);line-height:1.45}
@media(max-width:1450px){.material-filter-grid.has-sticker-type{grid-template-columns:repeat(4,minmax(0,1fr))}.material-filter-grid.has-sticker-type .material-filter-actions{grid-column:1/-1;justify-content:flex-end}.material-manage-filterbar{grid-template-columns:minmax(260px,1.5fr) repeat(4,minmax(125px,.75fr));}.material-manage-filterbar .material-filter-reset{grid-column:1/-1;justify-self:end}}
@media(max-width:1100px){.material-filter-grid,.material-filter-grid.has-sticker-type{grid-template-columns:repeat(2,minmax(0,1fr))}.material-filter-grid .material-filter-actions,.material-filter-grid.has-sticker-type .material-filter-actions{grid-column:1/-1}.material-create-head{align-items:stretch}.material-create-tools{justify-items:stretch}.material-quick-admin{justify-content:flex-start}.material-kind-switch{width:100%}.material-kind-btn{flex:1}.material-manage-filterbar{grid-template-columns:repeat(2,minmax(0,1fr))}.material-manage-filterbar .material-manage-search{grid-column:1/-1}.material-manage-filterbar .material-filter-reset{grid-column:1/-1;justify-self:stretch}.sticker-type-layout{grid-template-columns:1fr}.sticker-type-add-panel{position:static}}
@media(max-width:760px){.material-filter-panel{padding:13px}.material-filter-head{flex-direction:column;gap:8px}.material-filter-grid,.material-filter-grid.has-sticker-type{grid-template-columns:1fr}.material-filter-grid .material-filter-actions,.material-filter-grid.has-sticker-type .material-filter-actions{grid-column:auto;display:grid;grid-template-columns:1fr 1fr}.material-filter-actions .primary-btn,.material-filter-actions .ghost-btn{text-align:center;justify-content:center}.material-create-tools{width:100%}.material-quick-admin{display:grid;grid-template-columns:1fr 1fr}.material-quick-admin .mini-btn{text-align:center}.material-manage-filterbar{grid-template-columns:1fr;padding:10px}.material-manage-filterbar .material-manage-search,.material-manage-filterbar .material-filter-reset{grid-column:auto}.material-library-result{align-self:flex-start}.sticker-type-card summary{grid-template-columns:1fr auto}.sticker-type-count{display:none}.sticker-type-card summary .badge{justify-self:start}.sticker-type-card summary .manage-edit-label{justify-self:end}.sticker-type-delete-form{align-items:flex-start;flex-direction:column}.sticker-type-delete-form .ghost-btn{width:100%;justify-content:center}}


/* =========================================================
   V0.0.10 — Materials UX/UI spacing + responsive multi-device pass
   Cleaner rows, better breathing room, tablet drawer nav,
   and card-style material tables on tablet/mobile.
   ========================================================= */
.material-v001-table{border-spacing:0 14px}
.material-v001-table thead th,.material-manage-table thead th,.material-history-table thead th,.material-reorder-table thead th{padding:0 14px 6px;font-size:11px;letter-spacing:.02em}
.material-v001-table td,.material-manage-table td,.material-history-table td,.material-reorder-table td,.responsive-data-table td{padding:14px 14px}
.material-v001-table tbody tr td,.material-manage-table tbody tr td,.material-history-table tbody tr td,.material-reorder-table tbody tr td,.responsive-data-table tbody tr td{transition:border-color .18s,background .18s,transform .18s}
.material-v001-table tbody tr:hover td,.material-manage-table tbody tr:hover td,.material-history-table tbody tr:hover td,.material-reorder-table tbody tr:hover td{background:#15151a;border-color:rgba(236,30,36,.16)}
.material-v001-table .sku-main,.material-manage-table .sku-main{display:grid;gap:4px}
.material-v001-table .sku-main b,.material-manage-table .sku-main b{font-size:14px;line-height:1.4}
.material-v001-table .sku-main small,.material-manage-table .sku-main small{line-height:1.45}
.material-v001-table .row-actions,.material-manage-table .manage-action-group{justify-content:center;gap:8px;flex-wrap:wrap}
.material-v001-table .dual-value-stack.compact,.material-manage-table .manage-stock-mini{gap:6px}
.material-v001-table .access-badges{justify-content:center}
.material-filter-panel,.panel{overflow:hidden}
.table-wrap{scrollbar-width:thin;scrollbar-color:rgba(236,30,36,.45) transparent;padding-bottom:4px}
.table-wrap::-webkit-scrollbar{height:9px;width:9px}
.table-wrap::-webkit-scrollbar-thumb{background:rgba(236,30,36,.4);border-radius:999px}
.table-wrap::-webkit-scrollbar-track{background:transparent}

@media(max-width:1280px){
  .content{padding:18px 20px 34px}
  .panel{padding:16px}
  .panel-head h2{font-size:20px}
  .material-manage-filterbar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .material-manage-filterbar .material-manage-search{grid-column:1/-1}
}

@media(max-width:1024px){
  body.mobile-nav-open{overflow:hidden}
  body.mobile-nav-open:after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.58);backdrop-filter:blur(2px);z-index:29}
  .sidebar{transform:translateX(-101%);transition:.22s;box-shadow:20px 0 45px rgba(0,0,0,.28);width:min(78vw,300px)!important}
  .sidebar.open{transform:translateX(0)!important}
  .main{margin-left:0}
  .mobile-only{display:inline-grid;place-items:center}
  .topbar{height:auto;min-height:74px;padding:14px 16px;gap:12px;align-items:flex-start;flex-wrap:wrap}
  .topbar-left,.topbar-actions{width:100%}
  .topbar-left>div{min-width:0}
  .topbar h1{font-size:18px;line-height:1.25}
  .topbar p{font-size:10px}
  .topbar-actions{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(220px,.8fr) auto auto;gap:8px;align-items:center}
  .sku-fast-finder,.actor-mini{min-width:0;width:100%}
  .actor-mini input{width:100%}
  .content{padding:16px}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dashboard-grid,.dashboard-grid.lower,.settings-grid,.product-page-grid,.field-grid.two,.field-grid.three,.field-grid.four,.category-summary,.quick-buttons,.transaction-types,.category-row-main,.raw-lower-grid{grid-template-columns:1fr}
}

@media(max-width:820px){
  .topbar-actions{grid-template-columns:1fr 1fr}
  .topbar-actions .sku-fast-finder,.topbar-actions .actor-mini{grid-column:1/-1}
  .topbar-actions .primary-btn,.topbar-actions .icon-btn{width:100%}
  .material-filter-grid,.material-filter-grid.has-sticker-type,.material-manage-filterbar{grid-template-columns:1fr}
  .material-filter-grid .material-filter-actions,.material-filter-grid.has-sticker-type .material-filter-actions{grid-column:auto;display:grid;grid-template-columns:1fr 1fr}
}

@media(max-width:1180px){
  .responsive-data-table,.responsive-data-table thead,.responsive-data-table tbody,.responsive-data-table tr,.responsive-data-table th,.responsive-data-table td{display:block;width:100%}
  .responsive-data-table{min-width:0!important;border-spacing:0}
  .responsive-data-table thead{display:none}
  .responsive-data-table tbody{display:grid;gap:14px}
  .responsive-data-table tbody tr{display:grid;gap:11px;padding:15px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#131318,#101014);box-shadow:0 10px 26px rgba(0,0,0,.18)}
  .responsive-data-table tbody tr.archived-row{opacity:.82}
  .responsive-data-table td{padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;text-align:left!important;box-shadow:none!important;display:grid;grid-template-columns:minmax(118px,.78fr) minmax(0,1fr);gap:10px;align-items:start;min-width:0}
  .responsive-data-table td::before{content:attr(data-label);display:block;color:var(--muted);font-size:11px;line-height:1.45;padding-top:2px}
  .responsive-data-table td.center,.responsive-data-table td.right{justify-items:start}
  .responsive-data-table td.center>.row-actions,.responsive-data-table td.center>.manage-action-group,.responsive-data-table td.center>.access-badges{justify-content:flex-start}
  .responsive-data-table td[data-label='รูป']{grid-template-columns:88px 1fr;align-items:center}
  .responsive-data-table td[data-label='รูป'] .product-thumb,.responsive-data-table td[data-label='รูป'] .manage-material-thumb{margin:0}
  .responsive-data-table td[data-label='ชื่อรายการ / SKU'] .sku-main,.responsive-data-table td[data-label='SKU / รายการ'] .sku-main{gap:3px}
  .responsive-data-table td[data-label='ทำรายการ'],.responsive-data-table td[data-label='จัดการ']{grid-template-columns:1fr}
  .responsive-data-table td[data-label='ทำรายการ']::before,.responsive-data-table td[data-label='จัดการ']::before{margin-bottom:2px}
  .responsive-data-table td[data-label='ทำรายการ'] .row-actions,.responsive-data-table td[data-label='จัดการ'] .manage-action-group{width:100%;justify-content:flex-start}
  .responsive-data-table td[colspan]{display:block;text-align:left!important}
  .responsive-data-table td[colspan]::before{display:none}
  .responsive-data-table .inline-form{display:inline-flex}
  .material-v001-table .dual-value-stack.compact,.material-manage-table .manage-stock-mini{justify-items:start}
  .table-wrap{overflow:visible}
}

@media(max-width:760px){
  .sidebar{width:min(84vw,290px)!important}
  .topbar{padding:10px 12px}
  .topbar p{display:none}
  .topbar-actions{grid-template-columns:1fr 1fr}
  .topbar-actions .primary-btn{font-size:13px;padding:10px 12px;height:40px}
  .topbar-actions .icon-btn{height:40px}
  .content{padding:14px}
  .panel{padding:14px}
  .panel-head{gap:10px;flex-direction:column;align-items:flex-start}
  .panel-head .ghost-btn,.panel-head .primary-btn{width:100%;justify-content:center}
  .material-filter-panel{padding:14px}
  .filter-count-badge{align-self:flex-start}
  .active-filter-chips{gap:8px}
  .responsive-data-table tbody tr{padding:14px}
  .responsive-data-table td{grid-template-columns:1fr;gap:6px}
  .responsive-data-table td[data-label='รูป']{grid-template-columns:1fr;justify-items:start}
  .responsive-data-table td::before{font-size:10px;text-transform:none;letter-spacing:.01em}
  .responsive-data-table td[data-label='ทำรายการ'] .row-actions,.responsive-data-table td[data-label='จัดการ'] .manage-action-group{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .responsive-data-table td[data-label='จัดการ'] .manage-action-group .inline-form,.responsive-data-table td[data-label='จัดการ'] .manage-action-group .mini-btn{width:100%}
  .responsive-data-table td[data-label='จัดการ'] .manage-action-group .inline-form .mini-btn{width:100%}
}

@media(max-width:480px){
  .topbar h1{font-size:16px}
  .topbar-actions{grid-template-columns:1fr}
  .topbar-actions .primary-btn,.topbar-actions .icon-btn{width:100%}
  .actor-mini{padding:8px 10px}
  .material-filter-grid .material-filter-actions,.material-filter-grid.has-sticker-type .material-filter-actions{grid-template-columns:1fr}
  .responsive-data-table td[data-label='ทำรายการ'] .row-actions,.responsive-data-table td[data-label='จัดการ'] .manage-action-group{grid-template-columns:1fr}
}


/* =========================================================
   V0.0.11 — cleaner inventory rows
   Sticker stock list is text-first: no image, self-withdraw or unit-cost columns.
   Unit cost stays in Dashboard/detail/manage forms instead of daily stock rows.
   ========================================================= */
.sticker-material-table{min-width:1080px!important;table-layout:auto}
.sticker-manage-table{min-width:980px!important;table-layout:auto}
.general-material-table{min-width:1180px!important}
.general-manage-table{min-width:1120px!important}
.sticker-material-table th,.sticker-material-table td{padding-left:16px;padding-right:16px}
.sticker-material-table th:nth-child(1),.sticker-material-table td:nth-child(1){min-width:110px}
.sticker-material-table th:nth-child(2),.sticker-material-table td:nth-child(2){min-width:230px}
.sticker-material-table th:nth-child(3),.sticker-material-table td:nth-child(3){min-width:105px}
.sticker-material-table th:nth-child(4),.sticker-material-table td:nth-child(4){min-width:120px}
.sticker-material-table th:nth-child(5),.sticker-material-table td:nth-child(5){min-width:150px}
.sticker-material-table th:nth-child(6),.sticker-material-table td:nth-child(6){min-width:105px}
.sticker-material-table th:nth-child(7),.sticker-material-table td:nth-child(7){min-width:105px}
.sticker-material-table th:nth-child(8),.sticker-material-table td:nth-child(8){min-width:125px}
.sticker-material-table th:nth-child(9),.sticker-material-table td:nth-child(9){min-width:95px}
.sticker-material-table th:nth-child(10),.sticker-material-table td:nth-child(10){min-width:105px}
.sticker-name-link{font-size:13px;line-height:1.45}
.sticker-type-text{display:inline-block;line-height:1.45;color:#eef0f5}
.material-edit-overview.no-image{grid-template-columns:1fr}
.material-edit-overview.no-image .material-edit-stock{min-height:112px}
#materialEditExtraGrid.single-field{grid-template-columns:1fr}
.material-cost-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1380px){
  .sticker-material-table{min-width:1020px!important}
  .sticker-material-table th,.sticker-material-table td{padding-left:12px;padding-right:12px}
}
@media(max-width:1180px){
  .sticker-material-table,.sticker-manage-table{min-width:0!important}
  .material-cost-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .material-cost-kpis{grid-template-columns:1fr}
}

.bulk-selection-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;margin:0 0 14px;border:1px solid var(--line-soft);border-radius:14px;background:#101014}
.bulk-selection-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.bulk-selection-left small{color:var(--muted)}
.bulk-toolbar-actions{display:flex;gap:10px;flex-wrap:wrap}.primary-btn.danger-mode{background:linear-gradient(135deg,#c9191f,#ff4d56)}
.table-check{display:inline-flex;align-items:center;justify-content:center}.table-check input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}.select-col{width:52px}
.bulk-transaction-modal{width:min(980px,94vw);max-width:980px}.bulk-selected-list{display:grid;gap:12px;margin:14px 0}.bulk-item-card{border:1px solid var(--line-soft);border-radius:16px;background:#101014;padding:12px}.bulk-item-head{display:grid;gap:4px;margin-bottom:10px}.bulk-item-head b{font-size:14px}.bulk-item-head span{font-weight:600}.bulk-item-head small{color:var(--muted)}.bulk-item-fields{display:grid;grid-template-columns:minmax(0,180px) minmax(0,160px) minmax(0,1fr);gap:12px;align-items:end}.stock-preview.compact strong{font-size:16px}.bulk-item-invalid{border-color:rgba(255,110,119,.35)}
.manage-bulk-toolbar{margin-bottom:14px}
@media (max-width:900px){.bulk-item-fields{grid-template-columns:1fr}.bulk-selection-toolbar{align-items:flex-start}}

/* V0.0.15 — bulk receive + withdraw */
.bulk-in-btn{border-color:rgba(52,209,123,.34)!important;color:#b8f4cf!important}.bulk-in-btn:not(:disabled):hover{background:rgba(52,209,123,.10)!important}
.bulk-item-fields.has-cost{grid-template-columns:minmax(0,170px) minmax(0,150px) minmax(0,190px) minmax(0,1fr)}
@media(max-width:1100px){.bulk-item-fields.has-cost{grid-template-columns:repeat(2,minmax(0,1fr))}.bulk-item-fields.has-cost .stock-preview{grid-column:1/-1}}
@media(max-width:700px){.bulk-item-fields.has-cost{grid-template-columns:1fr}.bulk-item-fields.has-cost .stock-preview{grid-column:auto}.bulk-toolbar-actions{width:100%}.bulk-toolbar-actions>*{flex:1 1 140px}}

/* V0.0.16 — HUG styled material delete confirmation */
body.delete-modal-open{overflow:hidden}
.material-delete-backdrop{background:rgba(3,3,5,.78);backdrop-filter:blur(7px)}
.material-delete-modal{width:min(720px,100%);max-height:min(86vh,780px);padding:20px;display:flex;flex-direction:column;overflow:hidden;border-color:rgba(236,30,36,.28);box-shadow:0 28px 90px rgba(0,0,0,.52),0 0 0 1px rgba(236,30,36,.04)}
.material-delete-head{flex:0 0 auto;margin-bottom:14px}
.material-delete-title-wrap{display:flex;align-items:flex-start;gap:12px;min-width:0}.material-delete-title-wrap h2{margin:2px 0 2px;font-size:22px}.material-delete-title-wrap p{margin:0;color:var(--muted);font-size:11px}
.material-delete-icon{width:40px;height:40px;flex:0 0 40px;border-radius:13px;display:grid;place-items:center;background:rgba(255,84,95,.12);border:1px solid rgba(255,84,95,.30);color:#ff8991;font-size:22px;font-weight:800}
.material-delete-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:0 0 auto;margin-bottom:10px}
.material-delete-summary>div{padding:11px 13px;border:1px solid var(--line-soft);border-radius:13px;background:#0f0f12}.material-delete-summary span{display:block;color:var(--muted);font-size:10px}.material-delete-summary strong{display:block;margin-top:4px;font-size:14px;color:#fff}
.material-delete-warning{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;margin-bottom:12px;border-radius:13px;border:1px solid rgba(255,84,95,.24);background:rgba(255,84,95,.07);flex:0 0 auto}.material-delete-warning b{color:#ff9ba1;white-space:nowrap}.material-delete-warning span{color:#c9ced8;font-size:11px;line-height:1.55}
.material-delete-list{display:grid;gap:7px;overflow:auto;min-height:0;max-height:44vh;padding:2px 5px 2px 0;scrollbar-width:thin;scrollbar-color:rgba(236,30,36,.40) transparent}
.material-delete-list::-webkit-scrollbar{width:8px}.material-delete-list::-webkit-scrollbar-thumb{background:rgba(236,30,36,.35);border-radius:999px}
.material-delete-row{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center;padding:9px 11px;border:1px solid var(--line-soft);border-radius:12px;background:#111114}.material-delete-no{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:#1a1a1f;color:#9ea5b5;font-size:10px;font-weight:700}.material-delete-row-main{display:grid;grid-template-columns:minmax(100px,.36fr) minmax(0,1fr);gap:10px;align-items:center;min-width:0}.material-delete-row-main b{font-size:11px;color:#ffb2b6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-delete-row-main span{font-size:12px;color:#f2f4f8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.material-delete-actions{flex:0 0 auto;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}.material-delete-actions .danger-mode{min-width:190px;box-shadow:0 10px 26px rgba(236,30,36,.20)}
@media(max-width:620px){.material-delete-modal{padding:14px;max-height:92vh}.material-delete-title-wrap h2{font-size:18px}.material-delete-summary{grid-template-columns:1fr}.material-delete-warning{display:grid;gap:4px}.material-delete-row-main{grid-template-columns:1fr;gap:3px}.material-delete-row-main span{white-space:normal}.material-delete-list{max-height:42vh}.material-delete-actions{grid-template-columns:1fr}.material-delete-actions .danger-mode{min-width:0}}

/* V0.0.17 — Independent unit stock inside one SKU */
.sticker-unit-config-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sticker-unit-card{border:1px solid var(--line-soft);border-radius:16px;background:#101014;padding:14px;min-width:0}
.sticker-unit-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.sticker-unit-card-head b{font-size:15px}.sticker-unit-card-head small{max-width:70%;text-align:right;color:var(--muted);line-height:1.45}
.sticker-unit-config .section-heading small{max-width:780px}
@media(max-width:900px){.sticker-unit-config-grid{grid-template-columns:1fr}.sticker-unit-card-head{display:block}.sticker-unit-card-head small{display:block;max-width:none;text-align:left;margin-top:4px}}

/* =========================================================
   V0.0.20 — Global UX/UI spacing & layout audit
   Shared rhythm across every current page: dashboard, inventory,
   management, admin masters, departments, modals, settings, backup,
   notifications and login. No business-rule changes.
   ========================================================= */
:root{
  --ui-page-gap:16px;
  --ui-panel-pad:18px;
  --ui-form-gap:12px;
  --ui-field-row-gap:10px;
  --ui-control-h:42px;
  --ui-control-radius:11px;
}
body{line-height:1.45}
.content{padding:20px 22px 36px;min-width:0}
.content > .tabs,
.content > .panel,
.content > .kpi-grid,
.content > .dashboard-grid,
.content > .sticker-type-layout,
.content > .callout,
.content > .settings-grid,
.content > .product-page-grid{margin-bottom:var(--ui-page-gap)!important}
.content > :last-child{margin-bottom:0!important}
.panel{padding:var(--ui-panel-pad);border-radius:17px;min-width:0}
.panel-head{gap:16px;margin-bottom:15px;min-width:0}
.panel-head>div{min-width:0}
.panel-head h2{font-size:20px;line-height:1.28;margin:3px 0 0}
.panel-head p{margin:5px 0 0;line-height:1.55;max-width:980px}
.panel-head.compact-head{margin-bottom:12px}
.compact-info-panel .panel-head,.admin-summary-card .panel-head{margin-bottom:0}
.admin-summary-card{min-height:0}

/* Shared form rhythm */
.page-form,.modal-form,.settings-form{display:grid;gap:var(--ui-form-gap)}
.page-form>.field,.modal-form>.field,.settings-form>.field{margin:0}
.field{gap:6px;line-height:1.35}
.field>span{font-size:10px;font-weight:600;line-height:1.4}
.field input,.field select{min-height:var(--ui-control-h);height:var(--ui-control-h);padding:9px 11px;border-radius:var(--ui-control-radius)}
.field textarea{min-height:78px;padding:10px 11px;border-radius:var(--ui-control-radius);line-height:1.5}
.field input[type="file"]{height:auto;min-height:var(--ui-control-h)}
.field-help{margin-top:3px;line-height:1.45}
.field-grid{column-gap:12px;row-gap:10px}
.form-actions{gap:8px;margin-top:0;align-items:center}
.primary-btn,.ghost-btn{min-height:40px}
.mini-btn{min-height:34px}
.switch-row{min-height:50px;padding:11px 12px}
.check-card{min-height:40px;padding:9px 10px}

/* Section/form cards */
.material-editor-form{gap:12px}
.material-form-section{padding:14px 15px}
.section-heading{margin:0 0 11px;gap:9px}
.section-heading>span{width:27px;height:27px}
.section-heading b{line-height:1.35}.section-heading small{line-height:1.45}
.material-form-meta{gap:12px}
.form-note-card{min-height:70px;padding:11px 13px}
.sticker-access-rule{margin-top:10px;padding:11px 12px;gap:10px}
.sticker-unit-config-grid{gap:10px}.sticker-unit-card{padding:12px 13px}.sticker-unit-card-head{margin-bottom:10px}
.permission-check-grid{gap:7px;margin-top:9px}

/* All admin/master pages */
.material-admin-top-grid{gap:var(--ui-page-gap);align-items:start}
.admin-edit-list{gap:10px}
.admin-edit-card{border-radius:14px}
.admin-edit-card summary{padding:12px 14px;gap:11px;min-height:58px}
.admin-edit-form{padding:14px;gap:11px}
.admin-form-footer{padding-top:11px;gap:10px}
.admin-summary-metrics{gap:8px;margin-top:10px}.admin-summary-metrics>div{padding:11px 12px}
.sticker-type-layout{gap:var(--ui-page-gap)}
.sticker-type-hero{margin-bottom:0!important}
.sticker-type-form{gap:9px}
.sticker-type-list{gap:8px}
.sticker-type-card summary{padding:11px 13px;gap:10px;min-height:60px}
.sticker-type-edit-body{padding:12px 13px}
.sticker-type-form.edit{padding-bottom:11px}
.sticker-type-delete-form{padding-top:11px;gap:10px}

/* Department/member page — removes the large dead space seen in member add/edit cards */
.department-admin-body{gap:14px;padding-top:4px}
.department-settings-form{padding-bottom:14px}
.department-members-section{gap:10px}
.form-section-title{gap:8px;align-items:center}
.department-member-add{display:grid;gap:10px;padding:12px 13px}
.department-member-add>.field,.department-member-add>.form-actions{margin:0}
.department-member-add .field-grid{row-gap:9px;column-gap:10px}
.department-member-add .form-actions{justify-content:flex-end}
.department-member-list{gap:7px}
.department-member-row{gap:7px;padding:9px 10px}
.department-member-row .field{gap:4px}.department-member-row .field span{font-size:9px}.department-member-row .field input,.department-member-row .field select{height:38px;min-height:38px;padding:8px 9px}
.department-member-row .mini-btn{height:38px;min-height:38px}
.member-row-actions{gap:6px}

/* Inventory / management */
.material-filter-panel{padding:15px 16px}
.material-filter-head{margin-bottom:11px;gap:14px}
.material-smart-filter{gap:9px}
.material-filter-grid,.material-filter-grid.has-sticker-type{gap:8px}
.material-manage-filterbar{padding:10px 11px;gap:8px;margin-bottom:11px}
.material-list-switch{padding-bottom:9px}
.bulk-selection-toolbar{padding:10px 12px;margin-bottom:11px;gap:10px}
.bulk-toolbar-actions{gap:7px}
.data-table{border-spacing:0 9px}
.data-table thead th{padding:0 12px 5px;line-height:1.35}
.data-table td{padding:11px 12px}
.material-v001-table{border-spacing:0 10px}
.material-v001-table td,.material-manage-table td{padding-top:12px;padding-bottom:12px}
.manage-action-group,.row-actions{gap:6px}

/* Modal system */
.modal-backdrop{padding:14px}
.modal-card{border-radius:18px}
.transaction-modal-card{padding:17px}
.material-edit-modal-card{width:min(1000px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding:18px;overflow:auto;scrollbar-gutter:stable}
.material-edit-modal-card>.modal-head{margin-bottom:13px}
.material-edit-overview{grid-template-columns:136px minmax(0,1fr);gap:12px;margin-bottom:12px}
.material-edit-image{height:108px;border-radius:14px}
.material-edit-stock{padding:14px;border-radius:14px}.material-edit-stock strong{font-size:22px}
.modal-head{margin-bottom:14px;gap:10px}.modal-head h2{margin:2px 0 0;line-height:1.3}.modal-head p{line-height:1.5}
.modal-form{gap:11px}.modal-form .general-receive-note,.modal-form .raw-in-purchase-fields{margin:0}
.modal-actions{gap:8px;margin-top:2px;padding-top:6px}
.bulk-selected-list{gap:9px;margin:10px 0}.bulk-item-card{padding:10px 11px}.bulk-item-head{margin-bottom:8px}.bulk-item-fields{gap:9px}
.material-delete-modal{padding:18px}.material-delete-head{margin-bottom:12px}.material-delete-summary{gap:8px;margin-bottom:9px}.material-delete-warning{margin-bottom:10px}.material-delete-actions{margin-top:11px;padding-top:11px}

/* Dashboard, details, history, notifications, settings & backup */
.kpi-grid{gap:11px}.kpi-card{padding:14px 15px;min-height:104px}.kpi-card strong{margin:7px 0 2px}
.dashboard-grid{gap:var(--ui-page-gap)}
.mini-stat-grid{gap:8px}.mini-stat-grid>div{padding:10px 11px}
.activity-list,.alert-products,.notification-list,.category-summary{gap:8px}.activity-row,.alert-product,.notification-row{padding:10px 11px}
.notification-row p{margin:4px 0;line-height:1.5}
.material-detail-hero{gap:16px}.material-detail-main{gap:14px}.detail-badges{margin-top:8px;gap:6px}.raw-detail-kpis{margin:0 0 var(--ui-page-gap)!important}
.info-list{gap:0}.info-list>div{padding:10px 0}
.backup-actions{gap:8px}.backup-action{padding:13px 14px}
.callout{margin-top:0;padding:11px 13px}.callout p{margin:5px 0 0;line-height:1.55}
.filter-panel{padding:14px 15px}.filter-form{gap:8px;align-items:end}.filter-form .primary-btn,.filter-form .ghost-btn{height:var(--ui-control-h)}
.settings-form .field-grid{margin:0}.settings-form .form-actions{padding-top:2px}

/* Tabs & header keep a compact, predictable rhythm */
.tabs{gap:6px;margin-bottom:var(--ui-page-gap)}
.tabs a{padding:9px 12px}
.footer{padding:8px 22px 24px}

/* Login is part of the same spacing audit */
.access-card{padding:24px;border-radius:22px}.access-brand{margin-bottom:22px}.access-heading p{margin-bottom:18px}.access-form{gap:12px}.access-note{margin-top:18px}.access-card footer{margin-top:18px;padding-top:13px}

@media(max-width:1366px){
  :root{--ui-page-gap:14px;--ui-panel-pad:16px}
  .content{padding:17px 18px 30px}
  .panel-head{margin-bottom:13px}
  .material-admin-top-grid{grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr)}
  .material-edit-modal-card{width:min(940px,calc(100vw - 24px));padding:16px}
  .field-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .department-member-add .field-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1100px){
  .material-admin-top-grid,.sticker-type-layout{grid-template-columns:1fr}
  .sticker-type-add-panel{position:static}
  .material-edit-modal-card{width:calc(100vw - 22px)}
  .form-section-title{align-items:flex-start}
}
@media(max-width:760px){
  :root{--ui-page-gap:11px;--ui-panel-pad:13px;--ui-control-h:41px}
  .content{padding:12px 12px 24px}
  .panel{border-radius:15px}
  .panel-head{gap:9px;margin-bottom:11px}
  .panel-head h2{font-size:18px}
  .field-grid.two,.field-grid.three,.field-grid.four,.department-member-add .field-grid.four{grid-template-columns:1fr!important}
  .form-actions{width:100%;flex-wrap:wrap}.form-actions>*{flex:1 1 140px}
  .department-member-add{padding:11px}.department-member-add .form-actions{justify-content:stretch}.department-member-add .form-actions>*{width:100%}
  .department-member-row{padding:10px;gap:8px}
  .material-edit-modal-card{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);padding:12px}
  .material-edit-overview{grid-template-columns:94px minmax(0,1fr);gap:9px}.material-edit-image{height:88px}.material-edit-stock{padding:11px}.material-edit-stock strong{font-size:19px}
  .transaction-modal-card{padding:13px}.modal-backdrop{padding:6px}.modal-actions{grid-template-columns:1fr 1fr}
  .bulk-selection-toolbar{align-items:stretch}.bulk-selection-left{width:100%}.bulk-toolbar-actions{width:100%}.bulk-toolbar-actions>*{flex:1 1 120px}
  .data-table td{padding:10px 11px}
  .access-card{padding:20px}.access-brand{margin-bottom:18px}
}
@media(max-width:480px){
  .material-edit-overview{grid-template-columns:1fr}.material-edit-image{height:130px}
  .modal-actions{grid-template-columns:1fr}.modal-actions>*{width:100%}
  .tabs a{padding:8px 10px}
}

/* V0.0.20 audit follow-up: classes present in templates but previously relying on incidental styling */
.department-admin-list,.department-admin-card,.category-admin-card,.sticker-type-list-panel,.inventory-bulk-toolbar,.material-requester-member-field{min-width:0}
.material-delete-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
.material-delete-summary-grid>div{padding:11px 13px;border:1px solid var(--line-soft);border-radius:13px;background:#0f0f12}
.material-delete-summary-grid span{display:block;color:var(--muted);font-size:10px}
.material-delete-summary-grid strong{display:block;margin-top:4px;font-size:14px;color:#fff}
.notification-button{flex:0 0 auto}
@media(max-width:620px){.material-delete-summary-grid{grid-template-columns:1fr}}


/* =========================================================
   V0.0.21 — Visual QA follow-up
   Fixes missed spacing in Department/Member UI and makes every
   material/content image slot a true 1:1 frame across the app.
   ========================================================= */
:root{
  --ui-text-sm:11px;
  --ui-section-gap:14px;
}

/* Typography: keep helper/label text readable instead of visually cramped. */
.field>span{font-size:11px;line-height:1.45}
.field-help,.section-heading small,.form-section-title small,.safe-delete-note,
.department-system-note span,.sticker-type-summary-main small,.sticker-type-delete-form small{
  font-size:var(--ui-text-sm);line-height:1.55
}
.form-section-title b{font-size:15px;line-height:1.4}
.section-heading b{font-size:14px;line-height:1.4}

/* Department / member page: heading and helper are no longer pressed against
   opposite edges. The section gets its own visual breathing room. */
.department-members-section{
  gap:12px;
  padding-top:15px;
  margin-top:1px;
  border-top:1px solid var(--line-soft)
}
.department-members-title{
  display:grid;
  grid-template-columns:1fr;
  align-items:start;
  justify-items:start;
  gap:4px;
  padding:0 2px 2px
}
.department-members-title small{
  max-width:920px;
  text-align:left;
  color:var(--muted)
}
.department-member-add{
  padding:14px;
  gap:12px;
  border-radius:15px
}
.department-member-add .field-grid{
  row-gap:11px;
  column-gap:12px
}
.department-member-add>.field{margin-top:0}
.department-member-add .form-actions{padding-top:0}
.department-member-row{padding:11px 12px;gap:9px}
.department-member-row .field{gap:5px}
.department-member-row .field span{font-size:10px;line-height:1.4}
.department-member-row .field input,.department-member-row .field select{
  height:40px;min-height:40px;padding:8px 10px
}
.department-member-row .mini-btn{height:40px;min-height:40px}

/* Master/admin cards: avoid edge-hugging copy on wide screens. */
.admin-edit-card summary,.sticker-type-card summary{line-height:1.45}
.admin-edit-card summary small,.sticker-type-summary-main small{line-height:1.5}
.admin-edit-form{gap:13px}
.admin-form-footer{margin-top:2px}

/* 1:1 image system. All real material/content image frames are square.
   Actual source images keep their proportions inside the square preview. */
.brand-mark,.access-logo,.product-thumb,.manage-material-thumb,.detail-thumb,
.sku-fast-thumb,.tx-result-thumb,.tx-selected-image,.scanner-product-image,
.thumb-inline,.material-edit-image{
  aspect-ratio:1 / 1;
  height:auto
}
.brand-mark img,.access-logo img,.product-thumb img,.manage-material-thumb img,.detail-thumb img,
.sku-fast-thumb img,.tx-result-thumb img,.tx-selected-image img,.scanner-product-image img,
.thumb-inline img,.material-edit-image img{
  width:100%;height:100%;display:block
}
/* Thumbnails remain visually filled; edit/lightbox previews preserve the full image. */
.product-thumb img,.manage-material-thumb img,.detail-thumb img,.sku-fast-thumb img,
.tx-result-thumb img,.tx-selected-image img,.scanner-product-image img,.brand-mark img,.access-logo img{
  object-fit:cover
}
.material-edit-image img,.thumb-inline img{object-fit:contain;background:#09090b}

/* Material editor overview: square image, balanced stock card, no stretched preview. */
.material-edit-overview{
  grid-template-columns:112px minmax(0,1fr);
  align-items:stretch;
  gap:12px
}
.material-edit-image{
  width:112px;
  min-width:112px;
  min-height:0;
  border-radius:15px
}
.material-edit-stock{
  min-height:112px;
  padding:14px 16px
}
.material-edit-stock strong{line-height:1.25}

/* Full image viewer uses a 1:1 viewing canvas while keeping source aspect ratio. */
.image-lightbox-card{width:min(760px,calc(100vw - 28px))}
.image-lightbox-body{
  width:min(680px,calc(100vw - 64px),68vh);
  aspect-ratio:1 / 1;
  min-height:0;
  max-height:none;
  margin:0 auto;
  padding:16px;
  overflow:hidden;
  display:grid;
  place-items:center
}
.image-lightbox-body img{
  width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain
}

/* Details and cards should wrap instead of squeezing labels together. */
.material-detail-main{min-width:0}
.material-detail-main>div{min-width:0}
.detail-badges{flex-wrap:wrap}
.panel-head,.form-section-title,.admin-form-footer{min-width:0}
.panel-head p,.form-section-title small,.safe-delete-note{overflow-wrap:anywhere}

/* Tables/forms: readable spacing stays consistent across pages. */
.data-table td{line-height:1.45}
.data-table thead th{line-height:1.4}
.page-form{gap:13px}
.material-form-section{margin:0}
.sticker-type-form,.settings-form{gap:12px}
.notification-row{line-height:1.5}
.info-list>div{min-height:43px}

@media(max-width:1366px){
  .department-members-section{padding-top:14px}
  .department-member-add{padding:13px}
  .material-edit-overview{grid-template-columns:104px minmax(0,1fr)}
  .material-edit-image{width:104px;min-width:104px}
  .material-edit-stock{min-height:104px}
}
@media(max-width:900px){
  .department-members-title{gap:5px}
  .material-edit-overview{grid-template-columns:96px minmax(0,1fr)}
  .material-edit-image{width:96px;min-width:96px}
  .material-edit-stock{min-height:96px}
}
@media(max-width:760px){
  .department-members-section{padding-top:12px;gap:10px}
  .department-member-add{padding:12px;gap:10px}
  .department-member-row{padding:10px;gap:8px}
  .material-edit-overview{grid-template-columns:88px minmax(0,1fr)}
  .material-edit-image{width:88px;min-width:88px}
  .material-edit-stock{min-height:88px;padding:11px 12px}
  .image-lightbox-card{width:calc(100vw - 12px)}
  .image-lightbox-body{width:min(calc(100vw - 44px),68vh);padding:10px}
}
@media(max-width:480px){
  .material-edit-overview{grid-template-columns:1fr;justify-items:start}
  .material-edit-image{width:112px;min-width:112px}
  .material-edit-stock{width:100%;min-height:96px}
  .department-members-title small{max-width:none}
}

/* =========================================================
   V0.0.22 — Breathing Room / Framed Content Pass
   Fixes "content hugging the border": spacing is measured from the
   visible frame, not only between form controls.
   ========================================================= */
:root{
  --ui-frame-pad-x:18px;
  --ui-frame-pad-y:16px;
  --ui-frame-gap:14px;
}

/* Department member area gets a real inset container so the section title,
   helper text, green add form and member rows never sit against card edges. */
.department-members-section{
  margin:2px 14px 16px;
  padding:18px;
  gap:16px;
  border:1px solid var(--line-soft);
  border-radius:17px;
  background:rgba(255,255,255,.012)
}
.department-members-title{
  padding:2px 3px 0;
  gap:6px;
  margin:0
}
.department-members-title b{font-size:16px;line-height:1.45}
.department-members-title small{font-size:11px;line-height:1.65;margin:0}

/* The green frame in "เพิ่มบุคลากร" needs inner breathing room of its own. */
.department-member-add{
  padding:18px;
  gap:15px;
  border-radius:16px
}
.department-member-add .field-grid{row-gap:13px;column-gap:14px}
.department-member-add .field{gap:7px}
.department-member-add .field>span{margin:0 1px}
.department-member-add>.field{margin-top:1px}
.department-member-add .form-actions{padding-top:1px;margin-top:0}
.department-member-add .mini-btn{min-height:38px;padding-left:14px;padding-right:14px}

/* Existing member rows also get a consistent inset from their own border. */
.department-member-list{gap:10px}
.department-member-row{
  padding:13px 14px;
  gap:10px;
  border-radius:14px
}
.department-member-row .field{gap:6px}
.department-member-row .field>span{margin-left:1px}
.member-row-actions{gap:8px;padding-bottom:1px}

/* Contextual / coloured frames throughout the current app use the same rule:
   text must have visible air from the border, not merely control-to-control gaps. */
.general-receive-note,
.raw-in-purchase-fields,
.department-system-note,
.permission-box,
.form-note-card,
.sticker-access-rule,
.material-delete-warning,
.callout,
.raw-selected-material,
.undo-preview,
.bulk-item-card,
.material-edit-stock{
  padding:var(--ui-frame-pad-y) var(--ui-frame-pad-x)
}
.general-receive-note,
.department-system-note,
.permission-box,
.form-note-card,
.sticker-access-rule,
.raw-selected-material,
.bulk-item-card,
.material-edit-stock{gap:8px}

/* Admin detail bodies: make the transition from the summary row to content
   feel deliberate instead of touching the opened-card edges. */
.department-admin-body{padding-top:8px;padding-bottom:2px;gap:16px}
.department-settings-form{margin:0 14px;padding:16px 18px 18px;border:1px solid var(--line-soft);border-radius:17px;background:rgba(255,255,255,.01)}
.department-settings-form .form-section-title{padding:0 2px 2px}
.department-settings-form>.field{margin-top:1px}
.department-settings-form .admin-form-footer{margin-top:2px}

/* Shared headings in framed/form cards should not touch their first control. */
.form-section-title{row-gap:5px}
.section-heading{margin-bottom:13px}
.admin-edit-form{gap:14px}
.page-form{gap:14px}

@media(max-width:1366px){
  :root{--ui-frame-pad-x:17px;--ui-frame-pad-y:15px}
  .department-members-section{margin:2px 12px 14px;padding:17px;gap:15px}
  .department-member-add{padding:17px}
  .department-settings-form{margin:0 12px;padding:15px 17px 17px}
}
@media(max-width:900px){
  .department-members-section{margin:2px 10px 12px;padding:16px;gap:14px}
  .department-member-add{padding:16px;gap:13px}
  .department-member-row{padding:12px 13px}
  .department-settings-form{margin:0 10px;padding:14px 16px 16px}
}
@media(max-width:760px){
  :root{--ui-frame-pad-x:14px;--ui-frame-pad-y:13px}
  .department-members-section{margin:0 6px 10px;padding:14px;gap:13px;border-radius:15px}
  .department-member-add{padding:14px;gap:12px}
  .department-member-add .field-grid{row-gap:11px}
  .department-member-row{padding:12px;gap:9px}
  .department-settings-form{margin:0 6px;padding:14px}
}


/* =========================================================
   V0.0.23 — Department member row collision fix
   Prevent compact-field minimum widths from overflowing the Sort/Note columns.
   ========================================================= */
.department-member-row{
  grid-template-columns:
    minmax(170px,1.2fr)
    minmax(120px,.72fr)
    minmax(150px,.82fr)
    minmax(140px,.78fr)
    92px
    minmax(220px,1.35fr)
    136px;
  column-gap:12px;
  row-gap:10px;
  align-items:end
}
.department-member-row>.field,
.department-member-row .field.compact,
.department-member-row .field.grow,
.department-member-row .member-sort-field,
.department-member-row .member-note-field{
  min-width:0!important;
  width:100%
}
.department-member-row .field input,
.department-member-row .field select{
  width:100%;
  min-width:0!important;
  max-width:100%
}
.department-member-row .member-sort-field{grid-column:auto}
.department-member-row .member-note-field{grid-column:auto}
.department-member-row .member-row-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(58px,1fr));
  width:136px;
  min-width:136px;
  gap:8px;
  align-items:end;
  padding-bottom:0
}
.department-member-row .member-row-actions .mini-btn{
  width:100%;
  min-width:0;
  padding-inline:9px
}

@media(max-width:1380px){
  .department-member-row{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:11px 12px
  }
  .department-member-row .member-sort-field{grid-column:auto}
  .department-member-row .member-note-field{grid-column:span 2}
  .department-member-row .member-row-actions{
    width:100%;
    min-width:0;
    grid-column:3;
    align-self:end
  }
}
@media(max-width:980px){
  .department-member-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .department-member-row .member-note-field{grid-column:1/-1}
  .department-member-row .member-row-actions{grid-column:1/-1;max-width:280px;justify-self:end}
}
@media(max-width:620px){
  .department-member-row{grid-template-columns:1fr;gap:10px}
  .department-member-row .member-note-field,
  .department-member-row .member-row-actions{grid-column:auto}
  .department-member-row .member-row-actions{max-width:none;justify-self:stretch}
}

/* =========================================================
   V0.0.24 — Batch Edit / Save All master-data UX
   ========================================================= */
.batch-editor-panel{display:grid;gap:16px}
.batch-save-toolbar{display:grid;grid-template-columns:minmax(280px,1fr) minmax(190px,240px) auto;gap:14px;align-items:end;padding:16px 18px;border:1px solid rgba(113,167,255,.22);border-radius:16px;background:linear-gradient(145deg,rgba(113,167,255,.07),#101014)}
.batch-save-copy h2,.batch-save-copy h3{margin:3px 0 0}.batch-save-copy p{margin:5px 0 0;color:var(--muted);font-size:11px}.batch-save-copy [data-batch-status],.batch-save-copy [data-dept-status]{color:#dce6ff;font-weight:600}
.batch-actor-field{min-width:0}.batch-toolbar-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.batch-toolbar-actions button{min-height:42px;white-space:nowrap}
.batch-edit-list{display:grid;gap:10px}.batch-edit-row{display:grid;gap:10px;align-items:end;padding:14px 15px;border:1px solid var(--line);border-radius:15px;background:#101014;transition:border-color .16s,background .16s,opacity .16s}.batch-edit-row>.field{min-width:0;margin:0}.batch-edit-row>.field input,.batch-edit-row>.field select{width:100%;min-width:0;max-width:100%}.batch-row-state{min-height:22px;display:flex;align-items:center;justify-content:center;padding:4px 7px;border-radius:8px;color:var(--muted);font-size:9px;white-space:nowrap}.batch-row-state:empty{padding:0;min-height:0}.batch-row-state.changed{background:rgba(113,167,255,.12);border:1px solid rgba(113,167,255,.25);color:#b9d1ff}.batch-row-state.new{background:rgba(52,209,123,.11);border:1px solid rgba(52,209,123,.25);color:#91efb8}.batch-row-state.delete{background:rgba(255,110,119,.11);border:1px solid rgba(255,110,119,.28);color:#ffb1b7}
.batch-edit-row.pending-change{border-color:rgba(113,167,255,.27)}.batch-edit-row.pending-new{border-color:rgba(52,209,123,.28);background:linear-gradient(145deg,rgba(52,209,123,.05),#101014)}.batch-edit-row.pending-delete{border-color:rgba(255,110,119,.32);background:linear-gradient(145deg,rgba(255,110,119,.06),#101014)}.batch-edit-row.pending-delete>.field,.batch-edit-row.pending-delete>.batch-usage{opacity:.55}.batch-edit-row.pending-delete>.field input,.batch-edit-row.pending-delete>.field select{pointer-events:none}
.batch-usage{display:grid;justify-items:center;align-content:center;min-height:42px;padding:5px 8px;border:1px solid var(--line-soft);border-radius:11px;background:#151519}.batch-usage span,.batch-usage small{color:var(--muted);font-size:9px}.batch-usage strong{font-size:15px;line-height:1.2}.batch-sort{min-width:0}.batch-status-field{min-width:0}.batch-note{min-width:0}.batch-grow{min-width:0}
.brand-batch-row{grid-template-columns:86px minmax(220px,1fr) 92px 140px 92px 72px}
.category-batch-row{grid-template-columns:86px minmax(180px,1.1fr) 155px 86px 135px minmax(180px,1fr) 82px 68px}
.sticker-type-batch-row{grid-template-columns:86px minmax(220px,1.1fr) 86px 135px minmax(220px,1fr) 82px 68px}
.supplier-batch-row{grid-template-columns:86px minmax(180px,1.1fr) minmax(130px,.8fr) minmax(125px,.72fr) minmax(130px,.75fr) 125px minmax(170px,.95fr) 82px 68px}

.department-workspace{display:grid;gap:16px}.department-save-toolbar{margin-bottom:0}.batch-framed-section{border:1px solid var(--line);border-radius:16px;background:#111114;padding:18px;display:grid;gap:14px}.department-settings-form .field-grid{align-items:end}.department-settings-form .department-note-field{grid-column:span 2}.department-delete-queue{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid rgba(255,110,119,.18);border-radius:13px;background:rgba(255,110,119,.04)}.department-delete-queue b,.department-delete-queue small{display:block}.department-delete-queue small{margin-top:3px;color:var(--muted);font-size:10px}.department-pending-delete>.batch-framed-section{border-color:rgba(255,110,119,.28)}
.department-members-title{display:flex!important;align-items:center!important;justify-content:space-between!important;flex-direction:row!important;gap:14px}.department-members-title>div{display:grid;gap:4px}.department-members-title small{max-width:900px}.batch-member-row.department-member-row{grid-template-columns:82px minmax(160px,1.1fr) minmax(105px,.65fr) minmax(120px,.72fr) minmax(120px,.72fr) 82px minmax(170px,1fr) 68px;gap:10px;padding:13px 14px;align-items:end}.batch-member-row.department-member-row>.field,.batch-member-row.department-member-row .member-sort-field,.batch-member-row.department-member-row .member-note-field{min-width:0;grid-column:auto!important}.batch-member-row.department-member-row .field>span{font-size:10px;line-height:1.4}.batch-member-row.department-member-row input,.batch-member-row.department-member-row select{width:100%;min-width:0;max-width:100%;height:40px;min-height:40px}.batch-member-row .member-delete-button{height:40px;min-height:40px;width:100%;padding:7px 9px}.batch-member-row.pending-delete>.field{opacity:.52}.batch-member-row.pending-delete>.field input,.batch-member-row.pending-delete>.field select{pointer-events:none}.batch-member-row.pending-delete{border-color:rgba(255,110,119,.3);background:rgba(255,110,119,.04)}.batch-member-row.pending-new{border-color:rgba(52,209,123,.27)}.batch-member-row.pending-change{border-color:rgba(113,167,255,.25)}

@media(max-width:1500px){
  .batch-save-toolbar{grid-template-columns:minmax(240px,1fr) 210px}.batch-toolbar-actions{grid-column:1/-1;justify-content:flex-end}
  .brand-batch-row{grid-template-columns:80px minmax(200px,1fr) 90px 130px 82px 68px}
  .category-batch-row,.sticker-type-batch-row,.supplier-batch-row{grid-template-columns:80px repeat(3,minmax(0,1fr));}.category-batch-row .batch-note,.sticker-type-batch-row .batch-note,.supplier-batch-row .batch-note{grid-column:span 2}.category-batch-row .batch-usage,.sticker-type-batch-row .batch-usage,.supplier-batch-row .batch-usage{grid-column:auto}
  .batch-member-row.department-member-row{grid-template-columns:80px repeat(3,minmax(0,1fr))}.batch-member-row.department-member-row .member-note-field{grid-column:span 2!important}.batch-member-row .member-delete-button{grid-column:auto}
}
@media(max-width:980px){
  .batch-save-toolbar{grid-template-columns:1fr}.batch-toolbar-actions{grid-column:auto;justify-content:flex-start}.batch-actor-field{max-width:none}
  .brand-batch-row,.category-batch-row,.sticker-type-batch-row,.supplier-batch-row{grid-template-columns:80px repeat(2,minmax(0,1fr))}.batch-edit-row .batch-note{grid-column:2/-1}.batch-edit-row>.mini-btn.delete{grid-column:-2/-1}
  .batch-member-row.department-member-row{grid-template-columns:80px repeat(2,minmax(0,1fr))}.batch-member-row.department-member-row .member-note-field{grid-column:2/-1!important}.batch-member-row .member-delete-button{grid-column:-2/-1}
  .department-settings-form .department-note-field{grid-column:1/-1}.department-members-title{align-items:flex-start!important;flex-direction:column!important}
}
@media(max-width:620px){
  .batch-save-toolbar,.batch-framed-section{padding:14px}.batch-toolbar-actions{display:grid;grid-template-columns:1fr;width:100%}.batch-toolbar-actions button{width:100%}
  .brand-batch-row,.category-batch-row,.sticker-type-batch-row,.supplier-batch-row,.batch-member-row.department-member-row{grid-template-columns:1fr;gap:9px}.batch-row-state{justify-self:start}.batch-edit-row .batch-note,.batch-edit-row>.mini-btn.delete,.batch-member-row.department-member-row .member-note-field,.batch-member-row .member-delete-button{grid-column:auto!important}.batch-usage{justify-items:start}.department-delete-queue{align-items:flex-start;flex-direction:column}.department-delete-queue button{width:100%}
}


/* V0.0.25 — Sticker type pills use the same visual language as category pills. */
.sticker-type-pill{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.sticker-type-pill.is-empty{color:var(--muted);border-color:var(--line);background:#151519}

/* =========================================================
   V0.0.26 — Notification Center UX refresh
   Cleaner popover, compact recent feed, filters and bulk summaries.
   ========================================================= */
.notification-popover{
  position:fixed;
  right:18px;
  top:66px;
  width:min(430px,calc(100vw - 28px));
  max-height:min(620px,calc(100vh - 88px));
  overflow:hidden;
  padding:0;
  border:1px solid rgba(255,255,255,.11);
  border-radius:18px;
  background:linear-gradient(160deg,#17171b,#101014 72%);
  box-shadow:0 24px 70px rgba(0,0,0,.52),0 0 0 1px rgba(236,30,36,.04);
  z-index:80
}
.notification-popover-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 16px 13px;border-bottom:1px solid var(--line-soft);background:rgba(255,255,255,.012)}
.notification-popover-head>div{min-width:0}.notification-popover-head .eyebrow{margin-bottom:2px}.notification-popover-head b{display:block;font-size:15px}.notification-popover-head small{display:block;color:var(--muted);font-size:9px;margin-top:3px;line-height:1.45}.notification-popover-head .mini-btn{flex:0 0 auto}
.notification-popover-list{padding:9px;max-height:466px;overflow:auto;display:grid;gap:6px;scrollbar-width:thin;scrollbar-color:rgba(236,30,36,.42) transparent}
.notification-popover-item{display:grid;grid-template-columns:36px minmax(0,1fr) 14px;gap:10px;align-items:start;padding:10px 10px;border:1px solid transparent;border-radius:13px;background:#121216;transition:.16s;min-width:0}
.notification-popover-item:hover{background:#18181d;border-color:rgba(255,255,255,.08);transform:translateY(-1px)}
.notification-popover-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;border:1px solid var(--line);font-size:14px;font-weight:800;background:#19191e}
.notification-popover-item.kind-in .notification-popover-icon{color:#8df1b7;background:rgba(52,209,123,.09);border-color:rgba(52,209,123,.22)}
.notification-popover-item.kind-out .notification-popover-icon{color:#bfd5ff;background:rgba(113,167,255,.09);border-color:rgba(113,167,255,.22)}
.notification-popover-item.kind-warning .notification-popover-icon{color:#ffd18c;background:rgba(255,184,77,.09);border-color:rgba(255,184,77,.23)}
.notification-popover-item.kind-danger .notification-popover-icon{color:#ffb3b8;background:rgba(255,110,119,.10);border-color:rgba(255,110,119,.24)}
.notification-popover-copy{display:grid;gap:4px;min-width:0}.notification-popover-title{display:flex;gap:7px;align-items:center;min-width:0}.notification-popover-title b{font-size:12px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-popover-title em{font-style:normal;font-size:8px;padding:3px 6px;border-radius:999px;background:rgba(236,30,36,.11);border:1px solid rgba(236,30,36,.22);color:#ffadb1;white-space:nowrap}
.notification-popover-message{color:#cbd1dc;font-size:10px;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.notification-popover-meta{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:9px}.notification-popover-meta i{font-style:normal;color:#ff9ea3;padding-left:7px;border-left:1px solid var(--line)}.notification-popover-chevron{color:#6f7685;font-size:18px;line-height:34px;text-align:center}
.notification-popover-footer{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;border-top:1px solid var(--line-soft);color:#dfe4ee;font-size:10px;background:#121216}.notification-popover-footer:hover{background:#18181d;color:#fff}.notification-popover-footer b{font-size:16px;color:#ff9ea3}
.notification-popover-empty{display:grid;gap:4px;padding:26px 16px!important}.notification-popover-empty b{color:#fff}.notification-popover-empty span{color:var(--muted);font-size:10px;line-height:1.5}

.notification-center-panel{display:grid;gap:16px}.notification-center-head{align-items:center;margin-bottom:0}.notification-center-summary{display:grid;grid-template-columns:repeat(4,minmax(90px,1fr));gap:8px;min-width:min(560px,48vw)}.notification-center-summary>div{padding:9px 11px;border:1px solid var(--line-soft);border-radius:12px;background:#101014}.notification-center-summary span{display:block;color:var(--muted);font-size:9px}.notification-center-summary strong{display:block;font-size:17px;margin-top:3px}
.notification-filterbar{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px 12px;border:1px solid var(--line-soft);border-radius:14px;background:#101014}.notification-filter-tabs{display:flex;gap:6px;overflow:auto;scrollbar-width:none}.notification-filter-tab{padding:8px 11px;border-radius:10px;border:1px solid var(--line);background:#151519;color:#bdc4d0;font-size:10px;white-space:nowrap}.notification-filter-tab.active{background:rgba(236,30,36,.13);border-color:rgba(236,30,36,.28);color:#fff}.notification-search-wrap{display:flex;align-items:center;gap:7px;min-width:min(460px,40vw);padding-left:10px;border:1px solid var(--line);border-radius:11px;background:#0e0e11}.notification-search-wrap>span{color:#ff7e84}.notification-search-wrap input{flex:1;min-width:0;height:39px;border:0;background:transparent;color:#fff;outline:0}.notification-search-wrap .ghost-btn,.notification-search-wrap .mini-btn{height:34px;margin-right:3px;padding-block:6px}
.notification-feed{display:grid;gap:9px}.notification-feed-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line-soft);border-radius:15px;background:#101014;transition:.16s}.notification-feed-card:hover{background:#141418;border-color:rgba(255,255,255,.09)}.notification-feed-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line);font-size:15px;font-weight:800}.notification-feed-card.kind-in .notification-feed-icon{color:#8df1b7;background:rgba(52,209,123,.08);border-color:rgba(52,209,123,.22)}.notification-feed-card.kind-out .notification-feed-icon{color:#c3d9ff;background:rgba(113,167,255,.08);border-color:rgba(113,167,255,.22)}.notification-feed-card.kind-alert.level-warning .notification-feed-icon{color:#ffd18c;background:rgba(255,184,77,.08);border-color:rgba(255,184,77,.22)}.notification-feed-card.kind-alert.level-danger .notification-feed-icon{color:#ffb3b8;background:rgba(255,110,119,.09);border-color:rgba(255,110,119,.24)}
.notification-feed-main{min-width:0;display:grid;gap:4px}.notification-feed-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.notification-feed-title b{font-size:13px}.notification-tags{display:flex;gap:5px;flex-wrap:wrap}.notification-tag{font-size:8px;padding:3px 7px;border:1px solid var(--line);border-radius:999px;color:#c9cfda;background:#17171b}.notification-tag.bulk{color:#ffc0c3;border-color:rgba(236,30,36,.22);background:rgba(236,30,36,.08)}.notification-tag.sku{color:#bcd3ff;border-color:rgba(113,167,255,.2);background:rgba(113,167,255,.07)}.notification-feed-main p{margin:0;color:#d1d6e0;font-size:11px;line-height:1.55}.notification-feed-meta{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:9px}.notification-open-material{white-space:nowrap}.notification-empty{display:grid;gap:5px}.notification-empty b{color:#fff}.notification-empty span{color:var(--muted);font-size:10px}

@media(max-width:1100px){.notification-center-head{align-items:flex-start;flex-direction:column}.notification-center-summary{min-width:0;width:100%}.notification-filterbar{align-items:stretch;flex-direction:column}.notification-search-wrap{min-width:0;width:100%}}
@media(max-width:760px){.notification-popover{right:10px;top:64px;width:calc(100vw - 20px);max-height:calc(100vh - 78px)}.notification-popover-list{max-height:calc(100vh - 230px)}.notification-popover-head{padding:13px}.notification-center-summary{grid-template-columns:repeat(2,1fr)}.notification-feed-card{grid-template-columns:38px minmax(0,1fr);padding:12px}.notification-open-material{grid-column:2;justify-self:start}.notification-filter-tabs{width:100%}.notification-search-wrap{padding-left:8px}.notification-search-wrap .ghost-btn{padding-inline:10px}}
@media(max-width:460px){.notification-popover-title b{white-space:normal}.notification-popover-message{-webkit-line-clamp:3}.notification-center-summary{grid-template-columns:1fr 1fr}.notification-search-wrap{display:grid;grid-template-columns:auto 1fr auto}.notification-search-wrap .mini-btn{grid-column:1/-1;width:100%;margin:0 3px 3px 0}.notification-feed-card{grid-template-columns:34px minmax(0,1fr);gap:9px}.notification-feed-icon{width:34px;height:34px}}

/* =========================================================
   V0.0.27–V0.0.31 operational modules
   Stock Count / Purchase / Analytics / Excel-Restore / QR-Location
   ========================================================= */
.feature-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px;background:linear-gradient(135deg,rgba(236,30,36,.08),rgba(20,20,23,.92))}.feature-hero h2,.analytics-head h2{margin:4px 0 4px}.feature-hero p,.analytics-head p{margin:0;color:var(--muted)}
.stock-count-toolbar{margin-bottom:14px}.stock-count-table input:not(.count-input),.stock-count-table .count-input{width:100%;min-width:0}.stock-count-table td:nth-child(5){min-width:128px}.stock-count-table td:nth-child(6){min-width:260px}
.purchase-pick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}.purchase-pick-card{display:flex;align-items:center;gap:10px;border:1px solid var(--line-soft);background:#111114;border-radius:14px;padding:12px;cursor:pointer}.purchase-pick-card:hover{border-color:rgba(236,30,36,.3)}.purchase-pick-card input{width:17px;height:17px;accent-color:var(--accent)}.purchase-pick-card span{min-width:0}.purchase-pick-card b,.purchase-pick-card small{display:block}.purchase-pick-card small{color:var(--muted);margin-top:4px}
.purchase-receive-panel{border-color:rgba(52,209,123,.22)}.receive-actor{max-width:420px;margin-bottom:14px}.purchase-receive-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.purchase-receive-card{display:grid;grid-template-columns:minmax(0,1fr) 160px;align-items:center;gap:12px;border:1px solid var(--line-soft);background:#101014;border-radius:14px;padding:12px}.purchase-receive-card b,.purchase-receive-card small{display:block}.purchase-receive-card small{color:var(--muted);margin-top:4px}.purchase-receive-card input{width:100%;background:#0d0d10;border:1px solid var(--line);border-radius:10px;color:#fff;padding:9px 10px}.cost-input-wide{width:130px!important}
.analytics-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.analytics-period{margin:0}.analytics-kpis{margin:14px 0}.analytics-grid{grid-template-columns:1.35fr 1fr}.analytics-list{display:grid;gap:9px}.analytics-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--line-soft);background:#111114;border-radius:13px}.analytics-row.compact{grid-template-columns:minmax(0,1fr) auto}.analytics-rank{width:28px;height:28px;border-radius:9px;background:var(--accent-soft);display:grid;place-items:center;font-weight:700}.analytics-main b,.analytics-main small{display:block}.analytics-main small{color:var(--muted);margin-top:3px}.analytics-bar{height:5px;background:#242429;border-radius:999px;margin-top:7px;overflow:hidden}.analytics-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px}.daily-chart{height:230px;display:flex;align-items:flex-end;gap:7px;padding:20px 4px 6px;overflow-x:auto}.daily-column{min-width:30px;height:100%;display:grid;grid-template-rows:1fr auto;gap:5px}.daily-bars{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:100%}.daily-bars i{width:8px;min-height:2px;border-radius:5px 5px 2px 2px}.daily-bars i.in{background:var(--green)}.daily-bars i.out{background:var(--accent)}.daily-column small{text-align:center;color:var(--muted);font-size:9px}.chart-legend{display:flex;gap:16px;justify-content:flex-end;color:var(--muted);font-size:11px}.chart-legend span{display:flex;align-items:center;gap:6px}.chart-legend i{width:9px;height:9px;border-radius:3px}.legend-in{background:var(--green)}.legend-out{background:var(--accent)}
.location-batch-row{grid-template-columns:minmax(190px,1fr) minmax(120px,.55fr) minmax(220px,1.2fr) 90px 150px 90px auto}.material-qr-location-grid{margin-top:14px;grid-template-columns:1.3fr .7fr}.qr-card-body{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center}.qr-card-body img{width:150px;aspect-ratio:1/1;background:#fff;border-radius:16px;padding:8px}.qr-card-body b,.qr-card-body span{display:block}.qr-card-body b{font-size:20px}.qr-card-body span{color:var(--muted);margin:5px 0 12px}.material-location-card .form-actions{margin-top:12px}
.backup-ops-grid{grid-template-columns:1fr 1fr}.restore-warning{max-width:900px;margin-inline:auto}.import-error-row td{border-color:rgba(255,110,119,.25)!important;background:rgba(255,110,119,.045)!important}

@media(max-width:1280px){.purchase-pick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.location-batch-row{grid-template-columns:minmax(180px,1fr) minmax(120px,.5fr) minmax(180px,1fr) 90px 140px}.location-batch-row .batch-usage{display:none}}
@media(max-width:980px){.purchase-pick-grid,.purchase-receive-grid,.analytics-grid,.material-qr-location-grid,.backup-ops-grid{grid-template-columns:1fr}.analytics-head{flex-direction:column}.location-batch-row{grid-template-columns:1fr 1fr}.location-batch-row .batch-grow{grid-column:1/-1}.qr-card-body{grid-template-columns:120px minmax(0,1fr)}.qr-card-body img{width:120px}}
@media(max-width:620px){.purchase-pick-grid{grid-template-columns:1fr}.purchase-receive-card{grid-template-columns:1fr}.location-batch-row{grid-template-columns:1fr}.location-batch-row .batch-grow{grid-column:auto}.qr-card-body{grid-template-columns:1fr;justify-items:start}.analytics-period{width:100%;overflow:auto}.daily-chart{height:190px}}
.qr-barcode-stack{display:grid;gap:14px}.barcode-card-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding-top:12px;border-top:1px solid var(--line-soft)}.barcode-card-body img{width:100%;max-height:110px;object-fit:contain;background:#fff;border-radius:12px;padding:8px}@media(max-width:620px){.barcode-card-body{grid-template-columns:1fr}}
@media(min-width:1101px){.notification-center-summary{grid-template-columns:repeat(5,minmax(86px,1fr));min-width:min(700px,56vw)}}
.operations-quick-grid{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:1100px){.operations-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.operations-quick-grid{grid-template-columns:1fr}}
.stock-count-table tr.stock-count-diff td{background:rgba(255,184,77,.045);border-color:rgba(255,184,77,.22)}.stock-count-table tr.stock-count-diff input[name^="reason_"]{border-color:rgba(255,184,77,.38)}
.operations-hub,.material-qr-card{position:relative}

/* V0.0.32 — Purchase picker, PO detail and stock-count delete UX */
.optional-label{font-size:10px;color:var(--muted);font-weight:500}.purchase-create-panel{display:grid;gap:14px}.purchase-selected-counter{display:grid;grid-template-columns:auto auto auto;gap:5px;align-items:baseline;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:#101014}.purchase-selected-counter span,.purchase-selected-counter small{color:var(--muted);font-size:10px}.purchase-selected-counter b{font-size:20px}.purchase-create-meta{margin-bottom:14px}.purchase-picker-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:12px;border:1px solid var(--line-soft);border-radius:14px;background:#101014}.purchase-group-switch{padding:0;margin:0}.purchase-picker-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.purchase-picker-tools .search-input-shell{min-width:min(360px,70vw)}.purchase-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.purchase-choice-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 14px;border:1px solid var(--line-soft);border-radius:15px;background:#111114;cursor:pointer;transition:.18s}.purchase-choice-card:hover{border-color:#44444d;background:#151519}.purchase-choice-card.selected{border-color:rgba(236,30,36,.55);box-shadow:inset 0 0 0 1px rgba(236,30,36,.15)}.purchase-choice-card.is-low{border-color:rgba(255,184,77,.30)}.purchase-choice-card>input{width:17px;height:17px;accent-color:var(--accent)}.purchase-choice-main{display:grid;gap:4px;min-width:0}.purchase-choice-title{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}.purchase-choice-title b{color:#ff9ca3}.purchase-choice-title strong{font-size:13px}.purchase-choice-main small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.purchase-choice-meta{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;font-size:11px;color:#cfd4df}.purchase-create-actions{align-items:center;justify-content:space-between;border-top:1px solid var(--line-soft);padding-top:14px;margin-top:14px}.po-number-link{font-size:13px}.po-detail-hero .panel-head{margin-bottom:12px}.po-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.po-summary-grid>div{padding:12px;border:1px solid var(--line-soft);border-radius:13px;background:#101014;display:grid;gap:5px}.po-summary-grid span{font-size:10px;color:var(--muted)}.po-summary-grid strong{font-size:14px}.material-delete-modal .field{margin-top:12px}
@media(max-width:1180px){.purchase-choice-grid{grid-template-columns:1fr}.po-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.purchase-picker-toolbar,.purchase-create-actions{align-items:stretch;flex-direction:column}.purchase-picker-tools{display:grid;grid-template-columns:1fr 1fr;width:100%}.purchase-picker-tools .search-input-shell{grid-column:1/-1;min-width:0}.purchase-picker-tools .ghost-btn{width:100%}.purchase-choice-card{grid-template-columns:auto minmax(0,1fr)}.purchase-choice-meta{grid-column:2;justify-content:flex-start}.po-summary-grid{grid-template-columns:1fr}}

/* V0.0.33 — simplified PO workflow + friendlier error recovery */
.po-workflow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:4px 0 14px}
.po-workflow-step{display:flex;align-items:center;gap:10px;padding:12px 13px;border:1px solid var(--line-soft);border-radius:14px;background:#101014;color:var(--muted)}
.po-workflow-step>span{width:30px;height:30px;min-width:30px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line);background:#17171b;font-weight:700;color:#cbd1dc}
.po-workflow-step b,.po-workflow-step small{display:block}.po-workflow-step b{color:#dfe4ed}.po-workflow-step small{font-size:10px;margin-top:3px;color:var(--muted)}
.po-workflow-step.active{border-color:rgba(236,30,36,.42);background:rgba(236,30,36,.07)}.po-workflow-step.active>span{background:var(--accent);border-color:var(--accent);color:#fff}.po-workflow-step.active b{color:#fff}
.po-workflow-step.done{border-color:rgba(52,209,123,.24)}.po-workflow-step.done>span{background:rgba(52,209,123,.12);border-color:rgba(52,209,123,.30);color:#87efb3}
.po-next-step,.po-complete-panel{padding:16px}.po-next-step .callout,.po-complete-panel .callout{margin:0}
.error-panel-v033{max-width:920px;margin:24px auto!important;padding:34px!important;display:grid;grid-template-columns:190px minmax(0,1fr);gap:28px;align-items:start;text-align:left!important}
.error-panel-v033 .error-code{font-size:84px;font-weight:800;line-height:1;color:#ff8e93;text-align:center;padding:18px;border:1px solid rgba(236,30,36,.22);background:rgba(236,30,36,.06);border-radius:20px}
.error-panel-v033 .error-copy h2{font-size:26px;margin:6px 0 8px}.error-panel-v033 .error-copy>p{margin:0 0 16px;color:var(--muted);font-size:13px;line-height:1.7}
.error-context{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid var(--line-soft)}.error-context span{color:var(--muted);font-size:11px}.error-context b{overflow-wrap:anywhere}
.error-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}.error-dev{margin-top:14px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#0e0e11}.error-dev summary{cursor:pointer;color:#d7dce7}.error-dev pre{font-size:10px;color:var(--muted);white-space:pre-wrap;max-height:240px;overflow:auto}
@media(max-width:760px){.po-workflow{grid-template-columns:1fr}.error-panel-v033{grid-template-columns:1fr;padding:20px!important;margin:12px auto!important}.error-panel-v033 .error-code{font-size:58px}.error-actions>*{flex:1 1 100%}.error-context{grid-template-columns:1fr;gap:3px}}

/* =========================================================
   V0.0.34 — Purchase Order editor usability pass
   Native calendar picker + cleaner quantity/cost/note fields.
   ========================================================= */
.po-edit-panel .field-grid.three{gap:14px 16px}
.po-date-field{gap:7px}
.po-date-control{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:stretch;border:1px solid var(--line);border-radius:12px;background:#0f0f12;overflow:hidden;transition:border-color .18s,box-shadow .18s}
.po-date-control:focus-within{border-color:rgba(236,30,36,.5);box-shadow:0 0 0 3px rgba(236,30,36,.11)}
.po-date-control input[type="date"]{width:100%;height:44px;min-width:0;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:0 12px!important;color:#fff;color-scheme:dark;cursor:pointer}
.po-date-control input[type="date"]::-webkit-calendar-picker-indicator{opacity:0;width:0;margin:0;padding:0}
.po-date-button{width:44px;border:0;border-left:1px solid var(--line);background:#17171b;color:#ff9aa0;cursor:pointer;font-size:18px;display:grid;place-items:center;transition:.18s}
.po-date-button:hover{background:#21171a;color:#fff}
.po-date-preview{min-height:16px;color:#9da3b3!important;font-size:10px!important;line-height:1.5}
.po-header-note textarea{min-height:68px;resize:vertical;line-height:1.55}

.po-item-row td{vertical-align:middle}
.po-number-control,.po-money-control{display:flex;align-items:center;min-height:40px;border:1px solid var(--line);border-radius:11px;background:#0f0f12;overflow:hidden;transition:border-color .18s,box-shadow .18s}
.po-number-control:focus-within,.po-money-control:focus-within{border-color:rgba(236,30,36,.5);box-shadow:0 0 0 3px rgba(236,30,36,.1)}
.po-number-control{width:150px;margin-left:auto}
.po-money-control{width:155px;margin-left:auto}
.po-number-control input,.po-money-control input{width:100%;min-width:0;height:40px;border:0!important;border-radius:0!important;background:transparent!important;color:#fff!important;box-shadow:none!important;outline:0!important;text-align:right!important;padding:0 10px!important;appearance:textfield;-moz-appearance:textfield;font-weight:700}
.po-number-control input::-webkit-inner-spin-button,.po-number-control input::-webkit-outer-spin-button,.po-money-control input::-webkit-inner-spin-button,.po-money-control input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.po-number-control>span{flex:0 0 auto;min-width:42px;padding:0 9px;border-left:1px solid var(--line);color:var(--muted);font-size:10px;text-align:center;white-space:nowrap}
.po-money-control>span{flex:0 0 34px;display:grid;place-items:center;height:40px;border-right:1px solid var(--line);color:#ff9aa0;font-weight:700}
.po-line-note{width:100%;min-width:180px;height:40px;background:#0f0f12!important;border:1px solid var(--line)!important;border-radius:11px!important;color:#fff!important;padding:0 11px!important;outline:0!important;transition:border-color .18s,box-shadow .18s}
.po-line-note::placeholder{color:#666d7a}
.po-line-note:focus{border-color:rgba(236,30,36,.5)!important;box-shadow:0 0 0 3px rgba(236,30,36,.1)!important}
.po-line-total{white-space:nowrap;color:#fff}
.po-item-row td:nth-child(5){min-width:172px}
.po-item-row td:nth-child(7){min-width:176px}
.po-item-row td:nth-child(9){min-width:220px}

@media(max-width:1180px){
  .po-edit-panel .field-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .po-header-note{grid-column:1/-1}
}
@media(max-width:760px){
  .po-edit-panel .field-grid.three{grid-template-columns:1fr}
  .po-header-note{grid-column:auto}
  .po-number-control,.po-money-control{width:100%;margin-left:0}
  .po-line-note{min-width:0}
}


/* =========================================================
   V0.0.35 — Storage Location compact row proportions
   ========================================================= */
.location-batch-row{
  position:relative;
  grid-template-columns:minmax(200px,250px) minmax(125px,155px) minmax(260px,1fr) 82px 116px 72px 78px;
  grid-template-areas:"name code note sort status usage action";
  gap:10px;
  align-items:end;
  padding:14px;
}
.location-batch-row .batch-row-state{
  position:absolute;
  z-index:2;
  left:14px;
  top:-10px;
  min-height:0;
  padding:3px 8px;
  background:#151519;
  border:1px solid var(--line);
  box-shadow:0 4px 12px rgba(0,0,0,.22);
}
.location-batch-row .batch-row-state:empty{display:none}
.location-name-field{grid-area:name}
.location-code-field{grid-area:code}
.location-note-field{grid-area:note}
.location-sort-field{grid-area:sort}
.location-status-field{grid-area:status}
.location-usage{grid-area:usage}
.location-action{grid-area:action}
.location-batch-row>.field,
.location-batch-row>.field input,
.location-batch-row>.field select{min-width:0;max-width:100%;width:100%}
.location-batch-row>.field input,
.location-batch-row>.field select{height:40px}
.location-batch-row .batch-usage{min-width:0;height:40px;min-height:40px;padding:3px 5px}
.location-batch-row .batch-usage strong{font-size:14px}
.location-batch-row .location-action{width:100%;height:40px;padding:7px 8px;white-space:nowrap}

@media(max-width:1320px){
  .location-batch-row{
    grid-template-columns:minmax(180px,220px) minmax(115px,145px) minmax(220px,1fr) 78px 108px 68px 74px;
  }
}
@media(max-width:1120px){
  .location-batch-row{
    grid-template-columns:minmax(180px,1.2fr) minmax(130px,.75fr) minmax(220px,1.4fr) 88px;
    grid-template-areas:
      "name code note sort"
      "status status usage action";
  }
  .location-status-field{max-width:220px}
  .location-usage{justify-self:end;width:76px}
  .location-action{justify-self:end;width:88px!important}
}
@media(max-width:780px){
  .location-batch-row{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "name code"
      "note note"
      "sort status"
      "usage action";
    gap:10px 12px;
  }
  .location-status-field{max-width:none}
  .location-usage{justify-self:stretch;width:auto}
  .location-action{justify-self:stretch;width:100%!important}
}
@media(max-width:520px){
  .location-batch-row{
    grid-template-columns:1fr;
    grid-template-areas:"name" "code" "note" "sort" "status" "usage" "action";
  }
  .location-batch-row .batch-usage{justify-items:start;padding-left:10px}
}

/* =========================================================
   V0.0.38–V0.0.45 Final Operations / Mobile / QA pass
   ========================================================= */
.purchase-filter-form{display:grid;grid-template-columns:minmax(260px,1fr) 190px auto auto;gap:10px;align-items:end}.po-hero-actions{align-items:center}.purchase-receive-panel .purchase-receive-grid{gap:10px}.purchase-receive-card{min-width:0}
.stock-count-start-grid .form-actions{align-self:end}.stock-count-filter-tools{display:grid;grid-template-columns:minmax(220px,1fr) 160px;gap:10px;align-items:end}.stock-count-filter-tools select{height:42px;background:#0f0f12;border:1px solid var(--line);border-radius:12px;color:#fff;padding:0 12px}.stock-count-summary{margin-top:12px}
.location-view-link{text-decoration:none;color:inherit;transition:.18s}.location-view-link:hover{border-color:rgba(236,30,36,.35);background:#1a1517}.location-detail-head .location-qr-summary{display:flex;align-items:center;gap:16px;padding:14px;border:1px solid var(--line);border-radius:16px;background:#101014}.location-qr-summary img{width:116px;height:116px;object-fit:contain;background:#fff;border-radius:12px;padding:6px}.location-qr-summary div{display:grid;gap:5px}.location-qr-summary span{color:var(--muted)}.location-qr-summary strong{font-size:22px}.location-move-toolbar{display:grid;grid-template-columns:240px minmax(260px,1fr) auto;gap:10px;align-items:end;margin-bottom:14px}
.analytics-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.analytics-row[href]{color:inherit;text-decoration:none}.backup-history-list{display:grid;gap:8px}.backup-history-row{display:flex;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid var(--line-soft);border-radius:12px;background:#101014}.backup-history-row span{display:grid;gap:3px;min-width:0}.backup-history-row b{overflow:hidden;text-overflow:ellipsis}.backup-history-row small{color:var(--muted)}.backup-history-row:hover{border-color:rgba(236,30,36,.3)}
.mobile-bottom-nav{display:none}
@media(max-width:1180px){.purchase-filter-form{grid-template-columns:1fr 180px auto auto}.location-move-toolbar{grid-template-columns:1fr 1.3fr}.location-move-toolbar .primary-btn{grid-column:1/-1}.stock-count-filter-tools{grid-template-columns:1fr}}
@media(max-width:760px){body{padding-bottom:72px}.footer{padding-bottom:84px}.mobile-bottom-nav{position:fixed;z-index:70;left:0;right:0;bottom:0;height:64px;padding:5px max(8px,env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);gap:4px;background:rgba(10,10,12,.96);border-top:1px solid var(--line);backdrop-filter:blur(18px)}.mobile-bottom-nav a{min-width:0;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#aeb5c3;font-size:9px}.mobile-bottom-nav a span{font-size:14px}.mobile-bottom-nav a b{font-weight:500;white-space:nowrap}.mobile-bottom-nav a.active{background:rgba(236,30,36,.12);color:#fff}.mobile-bottom-nav .mobile-main-action{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;transform:translateY(-8px);box-shadow:0 8px 24px rgba(236,30,36,.28)}.purchase-filter-form,.location-move-toolbar{grid-template-columns:1fr}.purchase-filter-form .primary-btn,.purchase-filter-form .ghost-btn,.location-move-toolbar .primary-btn{width:100%;grid-column:auto}.po-hero-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.po-hero-actions .primary-btn{grid-column:1/-1}.location-detail-head .location-qr-summary{align-items:flex-start}.location-qr-summary img{width:92px;height:92px}.stock-count-filter-tools{grid-template-columns:1fr}.analytics-head-actions{width:100%;justify-content:space-between}.analytics-period{margin-bottom:0}}
@media(max-width:480px){.po-hero-actions{grid-template-columns:1fr}.po-hero-actions .primary-btn{grid-column:auto}.location-detail-head .location-qr-summary{flex-direction:column}.analytics-head-actions{align-items:stretch}.analytics-head-actions>.ghost-btn{width:100%}}


/* V0.0.46 — completed PO delete confirmation */
.po-delete-reason-field{margin-top:12px}
.po-delete-reason-field textarea{min-height:96px;resize:vertical}
.po-delete-stock-warning{margin-top:12px;border-color:rgba(255,184,77,.34);background:rgba(255,184,77,.08)}
.po-delete-stock-warning b{color:#ffd08a}
@media(max-width:760px){.po-delete-reason-field textarea{min-height:110px}}

/* =========================================================
   V0.0.48–V0.0.55 Operations modules
   Job / Request / Reservation / Supplier Intelligence /
   Recommendation / Action Center
   ========================================================= */
.ops-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.ops-hero h2{margin:4px 0 2px;font-size:24px}.ops-hero p{margin:4px 0 0;color:var(--muted)}
.ops-form{display:grid;gap:14px}
.ops-choice-list{display:grid;gap:8px;max-height:430px;overflow:auto;padding:10px;border:1px solid var(--line-soft);border-radius:16px;background:#0f0f12}
.ops-choice-head{display:flex;justify-content:space-between;gap:12px;padding:4px 4px 8px;color:var(--muted)}
.ops-choice-row{display:grid;grid-template-columns:24px minmax(0,1fr) 128px;gap:12px;align-items:center;padding:11px 12px;border:1px solid var(--line-soft);border-radius:13px;background:#121216}
.ops-choice-row:hover{border-color:rgba(236,30,36,.25)}.ops-choice-row>input[type="checkbox"]{width:17px;height:17px;accent-color:var(--accent)}
.ops-choice-main{display:grid;gap:3px;min-width:0}.ops-choice-main b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ops-choice-main small{color:var(--muted)}
.ops-qty{width:100%;min-width:0;background:#0c0c0f;border:1px solid var(--line);border-radius:10px;color:#fff;padding:9px 10px;text-align:right}
.jobs-layout{grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr)}
.compact-kpi{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px}.small-kpi{font-size:15px!important}
.reservation-mini{color:#ffb9bc!important;font-size:9px!important;white-space:nowrap}
.action-center-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.action-center-card{display:grid;gap:7px;padding:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#161619,#111114);box-shadow:var(--shadow)}
.action-center-card:hover{transform:translateY(-1px);border-color:rgba(236,30,36,.3)}.action-center-card span{color:#dce1eb;font-weight:700}.action-center-card strong{font-size:34px;line-height:1}.action-center-card small{color:var(--muted)}
.action-center-card.warning strong{color:var(--orange)}.action-center-card.request strong,.action-center-card.purchase strong{color:#ff939a}.action-center-card.reservation strong{color:var(--blue)}
.callout.success{border-color:rgba(52,209,123,.28);background:rgba(52,209,123,.06)}
@media(max-width:1180px){.jobs-layout{grid-template-columns:1fr}.action-center-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-choice-row{grid-template-columns:24px minmax(0,1fr) 110px}}
@media(max-width:760px){.action-center-grid{grid-template-columns:1fr}.ops-choice-row{grid-template-columns:24px minmax(0,1fr)}.ops-choice-row .ops-qty{grid-column:2}.compact-kpi{grid-template-columns:1fr}.ops-hero{display:block}}

/* =========================================================
   V0.0.56 — Request UX: separated picker + cleaner queue/detail
   ========================================================= */
.request-create-head{margin-bottom:16px}.request-create-head p,.request-queue-head p{margin:4px 0 0;color:var(--muted)}
.request-meta-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(280px,1.2fr) minmax(220px,1fr);gap:12px;align-items:start}
.request-note-field{grid-column:2/4}.request-job-field input{border-color:rgba(236,30,36,.28)}.request-job-field small{color:#9aa2b2;font-size:10px}
.request-picker{border:1px solid var(--line-soft);border-radius:18px;background:#101014;padding:14px;display:grid;gap:12px}
.request-picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.request-picker-head>div:first-child{display:grid;gap:4px}.request-picker-head small{color:var(--muted)}
.request-selection-summary{min-width:190px;text-align:right;display:grid;gap:3px}.request-selection-summary strong{font-size:14px}.request-selection-summary span{font-size:11px;color:var(--muted)}
.request-picker-tools{display:grid;grid-template-columns:auto minmax(260px,1fr);gap:10px;align-items:center}.request-group-tabs{display:flex;gap:8px;flex-wrap:wrap}
.request-group-tab{height:40px;border:1px solid var(--line);border-radius:12px;background:#151519;color:#dce2ec;padding:0 13px;font:inherit;font-weight:650;cursor:pointer;display:inline-flex;align-items:center;gap:8px}.request-group-tab span{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#202027;display:grid;place-items:center;font-size:10px}.request-group-tab:hover{background:#1c1c21}.request-group-tab.active{background:rgba(236,30,36,.14);border-color:rgba(236,30,36,.42);color:#fff}.request-group-tab.active span{background:rgba(236,30,36,.22)}
.request-search-shell,.request-filter-search{height:40px;border:1px solid var(--line);border-radius:12px;background:#0c0c0f;display:flex;align-items:center;gap:8px;padding:0 11px;color:#ff7e85}.request-search-shell input,.request-filter-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font:inherit}.request-search-shell input::placeholder,.request-filter-search input::placeholder{color:#747b89}
.request-choice-list{max-height:465px;padding:8px}.request-choice-row{grid-template-columns:24px minmax(0,1fr) minmax(150px,auto) 120px;transition:.16s}.request-choice-row.selected{background:rgba(236,30,36,.07);border-color:rgba(236,30,36,.36);box-shadow:inset 3px 0 0 var(--accent)}.request-choice-row:has(>input[type="checkbox"]:disabled){opacity:.56}.request-choice-row:has(>input[type="checkbox"]:disabled):hover{border-color:var(--line-soft)}
.request-availability{justify-self:end;border:1px solid var(--line);border-radius:999px;padding:5px 9px;font-size:10px;white-space:nowrap}.request-availability.is-ready{color:#8ee9b4;border-color:rgba(52,209,123,.24);background:rgba(52,209,123,.07)}.request-availability.is-out{color:#ff9ca3;border-color:rgba(255,110,119,.26);background:rgba(255,110,119,.07)}
.request-qty:disabled{opacity:.45;cursor:not-allowed}.request-empty-filter{padding:30px 16px;text-align:center;color:var(--muted)}
.request-submit-bar{position:sticky;bottom:-1px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid rgba(236,30,36,.18);border-radius:14px;background:rgba(17,17,20,.96);backdrop-filter:blur(14px);box-shadow:0 -8px 22px rgba(0,0,0,.18)}.request-submit-bar>div{display:grid;gap:3px}.request-submit-bar small{color:var(--muted)}.request-submit-bar .primary-btn:disabled{opacity:.48;cursor:not-allowed;transform:none;filter:none}
.request-queue-head{align-items:flex-end}.request-queue-filter{display:grid;grid-template-columns:minmax(220px,1fr) 160px 145px auto auto;gap:8px;align-items:center}.request-queue-filter select{height:40px;min-width:0;border:1px solid var(--line);border-radius:12px;background:#0f0f12;color:#fff;padding:0 11px}.request-queue-filter .ghost-btn{height:40px;white-space:nowrap}.request-type-badges{display:flex;gap:6px;flex-wrap:wrap}.request-queue-table td{vertical-align:middle}
.request-detail-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.request-detail-items{display:grid;gap:14px}.request-detail-group{display:grid;gap:8px}.request-detail-group.with-divider{padding-top:16px;border-top:1px solid var(--line-soft)}.request-detail-group-head>div{display:flex;align-items:center;gap:10px}.request-detail-group-head b{display:block}.request-detail-group-head small{display:block;color:var(--muted);margin-top:2px}.request-group-icon{width:32px;height:32px;border-radius:10px;background:#1b1b20;border:1px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:800}.request-group-icon.sticker{color:#ff9ca3;border-color:rgba(236,30,36,.24);background:rgba(236,30,36,.08)}.request-workflow-panel{display:grid;gap:10px}.request-delete-actions{margin-top:8px;padding-top:12px;border-top:1px solid var(--line-soft)}
@media(max-width:1180px){.request-meta-grid{grid-template-columns:1fr 1fr}.request-note-field{grid-column:1/-1}.request-picker-tools{grid-template-columns:1fr}.request-queue-head{align-items:flex-start;flex-direction:column}.request-queue-filter{width:100%;grid-template-columns:minmax(220px,1fr) 160px 145px auto auto}.request-choice-row{grid-template-columns:24px minmax(0,1fr) 145px 110px}.request-detail-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.request-meta-grid{grid-template-columns:1fr}.request-note-field{grid-column:auto}.request-picker-head{flex-direction:column}.request-selection-summary{text-align:left;min-width:0}.request-queue-filter{grid-template-columns:1fr 1fr}.request-filter-search{grid-column:1/-1}.request-choice-row{grid-template-columns:24px minmax(0,1fr) 112px}.request-choice-row .request-qty{grid-column:2/4}.request-availability{font-size:9px}.request-submit-bar{align-items:flex-start}.request-detail-kpis{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.request-group-tabs{display:grid;grid-template-columns:1fr 1fr}.request-group-tab{justify-content:center;padding:0 8px}.request-choice-row{grid-template-columns:22px minmax(0,1fr)}.request-choice-row .request-availability{grid-column:2;justify-self:start}.request-choice-row .request-qty{grid-column:2}.request-submit-bar{flex-direction:column}.request-submit-bar .primary-btn{width:100%}.request-queue-filter{grid-template-columns:1fr}.request-filter-search{grid-column:auto}.request-queue-filter .ghost-btn{width:100%}.request-detail-kpis{grid-template-columns:1fr}}


/* V0.0.57 — Request / Job note visibility */
.request-note-summary{margin-top:14px;padding:13px 15px;border:1px solid rgba(236,30,36,.22);border-radius:14px;background:linear-gradient(135deg,rgba(236,30,36,.07),rgba(255,255,255,.015));display:grid;gap:5px}
.request-note-summary span{color:var(--muted);font-size:10px;letter-spacing:.03em}
.request-note-summary strong{font-size:13px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.request-note-summary.empty-note{border-color:var(--line-soft);background:#101014}.request-note-summary.empty-note strong{color:var(--muted);font-weight:500}
.job-note-row{align-items:flex-start}.job-note-line{margin-top:7px;padding:7px 9px;border-left:2px solid rgba(236,30,36,.48);border-radius:0 8px 8px 0;background:rgba(236,30,36,.045);display:grid;gap:2px}
.job-note-line span{font-size:9px;color:#ff979c}.job-note-line b{font-size:11px;font-weight:500;color:#d8dde7;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:760px){.request-note-summary{padding:11px 12px}.job-note-line{padding:6px 8px}}

/* V0.0.58 — request-linked reservation workflow */
.reservation-create-panel{overflow:visible}
.reservation-mode-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:6px;border:1px solid var(--line-soft);border-radius:16px;background:#0d0d10}
.reservation-mode-btn{display:grid;gap:3px;text-align:left;padding:13px 15px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--text);cursor:pointer}
.reservation-mode-btn small{color:var(--muted);font-size:10px}.reservation-mode-btn.active{background:linear-gradient(135deg,rgba(236,30,36,.16),rgba(236,30,36,.05));border-color:rgba(236,30,36,.32)}
.reservation-base-fields{margin-top:2px}.reservation-mode-panel{border:0;margin:0;padding:0;min-width:0;display:grid;gap:12px}.reservation-request-picker{padding:14px;border:1px solid var(--line-soft);border-radius:16px;background:#101014}
.reservation-request-placeholder{display:grid;gap:5px;padding:24px;text-align:center;border:1px dashed var(--line);border-radius:16px;background:#0e0e11}.reservation-request-placeholder span{color:var(--muted);font-size:12px}
.reservation-request-card{display:grid;gap:12px;padding:14px;border:1px solid rgba(113,167,255,.24);border-radius:17px;background:linear-gradient(145deg,rgba(113,167,255,.055),#101014)}
.reservation-request-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.reservation-request-summary>div{display:grid;gap:4px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:12px;background:#0e0e11}.reservation-request-summary span{color:var(--muted);font-size:10px}.reservation-request-summary strong{font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reservation-source-note{display:grid;gap:5px;padding:11px 12px;border:1px solid rgba(255,184,77,.2);border-radius:12px;background:rgba(255,184,77,.05)}.reservation-source-note span{color:var(--muted);font-size:10px}.reservation-source-note b{white-space:pre-wrap;overflow-wrap:anywhere}
.reservation-source-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.reservation-source-head>div{display:grid;gap:3px}.reservation-source-head small{color:var(--muted)}
.request-source-row{grid-template-columns:24px minmax(200px,1.35fr) minmax(280px,1fr) 130px 118px}.reservation-request-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.reservation-request-metrics i{display:grid;gap:2px;padding:6px 7px;border-radius:9px;background:#0d0d10;color:var(--muted);font-style:normal;font-size:9px}.reservation-request-metrics b{color:var(--text);font-size:11px}.reservation-recommended{display:grid;gap:2px;text-align:right}.reservation-recommended small{color:var(--muted);font-size:9px}.reservation-recommended strong{color:#98efba;font-size:12px}
.ops-choice-row.selected{border-color:rgba(236,30,36,.42);background:linear-gradient(90deg,rgba(236,30,36,.09),#121216)}.reservation-unavailable{opacity:.52}.reservation-unavailable:hover{border-color:var(--line-soft)}
.reservation-direct-note{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid rgba(255,184,77,.2);border-radius:12px;background:rgba(255,184,77,.05)}.reservation-direct-note span{color:var(--muted);font-size:11px}
.reservation-submit-bar{position:sticky;bottom:12px;z-index:8;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid rgba(236,30,36,.22);border-radius:15px;background:rgba(15,15,18,.94);backdrop-filter:blur(14px);box-shadow:0 14px 36px rgba(0,0,0,.28)}.reservation-submit-bar>div{display:grid;gap:3px}.reservation-submit-bar small{color:var(--muted)}
@media(max-width:1280px){.request-source-row{grid-template-columns:24px minmax(180px,1fr) minmax(230px,1fr) 120px}.request-source-row .ops-qty{grid-column:2/-1;width:100%}.reservation-request-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.reservation-mode-switch,.reservation-request-summary{grid-template-columns:1fr}.reservation-source-head,.reservation-submit-bar{align-items:stretch;flex-direction:column}.request-source-row{grid-template-columns:24px minmax(0,1fr)}.request-source-row .reservation-request-metrics,.request-source-row .reservation-recommended,.request-source-row .ops-qty{grid-column:2}.reservation-request-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.reservation-recommended{text-align:left}.reservation-submit-bar .primary-btn{width:100%}}

/* V0.0.60 — polished reservation request combobox */
.reservation-request-combo-field{max-width:none}
.reservation-request-combobox{position:relative;width:100%}
.reservation-request-combobox>input[type="search"]{width:100%;min-height:46px;padding-right:54px;border-color:rgba(236,30,36,.24);background:linear-gradient(180deg,#0f1014,#0b0c10)}
.reservation-request-combobox.open>input[type="search"],.reservation-request-combobox>input[type="search"]:focus{border-color:rgba(236,30,36,.48);box-shadow:0 0 0 3px rgba(236,30,36,.12)}
.reservation-request-trigger{position:absolute;top:7px;right:8px;width:32px;height:32px;border-radius:10px;border:1px solid rgba(236,30,36,.18);background:#13141a;color:#ffd7da;display:grid;place-items:center;cursor:pointer;transition:.16s}
.reservation-request-trigger:hover{background:#1a1b22;border-color:rgba(236,30,36,.36)}
.reservation-request-combobox.open .reservation-request-trigger{transform:rotate(180deg);border-color:rgba(236,30,36,.36);background:rgba(236,30,36,.1)}
.reservation-request-dropdown{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;display:grid;gap:8px;padding:10px;border:1px solid rgba(236,30,36,.22);border-radius:16px;background:rgba(14,15,20,.98);box-shadow:0 22px 48px rgba(0,0,0,.42);backdrop-filter:blur(14px)}
.reservation-request-option-list{display:grid;gap:8px;max-height:270px;overflow:auto;padding-right:2px}
.reservation-request-option{width:100%;text-align:left;display:grid;gap:5px;padding:12px 13px;border:1px solid var(--line-soft);border-radius:13px;background:linear-gradient(180deg,#12131a,#0f1015);color:var(--text);cursor:pointer;transition:.16s}
.reservation-request-option:hover,.reservation-request-option.highlighted{border-color:rgba(236,30,36,.38);background:linear-gradient(135deg,rgba(236,30,36,.12),rgba(236,30,36,.04) 58%,#12131a)}
.reservation-request-option.is-selected{border-color:rgba(236,30,36,.5);box-shadow:inset 3px 0 0 var(--accent);background:linear-gradient(135deg,rgba(236,30,36,.16),rgba(236,30,36,.06) 58%,#13141a)}
.reservation-request-option-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.reservation-request-option-top b{font-size:13px}.reservation-request-option small{color:var(--muted);font-size:11px;line-height:1.45}
.reservation-request-empty{padding:14px 12px;border:1px dashed var(--line);border-radius:12px;text-align:center;color:var(--muted);font-size:12px;background:#101116}
.reservation-request-combo-field>small{color:var(--muted);font-size:10px;line-height:1.45}
@media(max-width:820px){.reservation-request-dropdown{padding:8px}.reservation-request-option{padding:11px 12px}.reservation-request-option-top{align-items:flex-start;flex-direction:column;gap:7px}.reservation-request-option-top .badge{align-self:flex-start}}

/* V0.0.61-V0.0.64 — returns, reversals, supplier returns, data quality */
.return-stock-table td{vertical-align:middle}.return-inline-form{display:grid;grid-template-columns:110px minmax(150px,190px) minmax(190px,1fr) auto;gap:8px;align-items:center}.return-inline-form input,.return-inline-form select{min-width:0;height:38px}.row-muted{opacity:.62}.supplier-return-panel{border-color:rgba(255,184,77,.2)}.supplier-return-form{display:grid;gap:14px}.supplier-return-history{display:grid;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft)}.supplier-return-history h3{margin:0;font-size:14px}.data-quality-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}.data-quality-hero .summary-cards>div{min-height:90px}.danger-text{color:#ff8c94!important}
@media(max-width:1280px){.return-inline-form{grid-template-columns:100px minmax(140px,180px) minmax(170px,1fr)}.return-inline-form .mini-btn{grid-column:1/-1;justify-self:end}.data-quality-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.return-inline-form{grid-template-columns:1fr}.return-inline-form .mini-btn{grid-column:auto;width:100%}.data-quality-kpis{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.data-quality-kpis{grid-template-columns:1fr}}