*{box-sizing:border-box}body{margin:0;background:#f4f7fb;color:#182b3e;font:15px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}header{background:#17324d;color:white}.shell{width:min(1220px,94%);margin:auto}.top{display:flex;gap:25px;align-items:center;justify-content:space-between;padding:19px 0}nav{display:flex;gap:22px;flex-wrap:wrap}nav a{color:#eaf5ff;text-decoration:none}main{padding:35px 0 60px}h1{margin:0;font-size:31px}p{color:#637283;margin:4px 0 24px}.heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.btn{background:#1663b1;color:#fff;display:inline-block;border:0;text-decoration:none;border-radius:8px;padding:11px 17px;font-size:14px;font-weight:650;cursor:pointer}.btn.secondary{background:#e2eaf4;color:#1c3f62}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}.stats div{background:white;padding:22px;border:1px solid #e0e7ef;border-radius:10px}.stats span{color:#6a7b8c;display:block}.stats strong{font-size:30px}.tablewrap{overflow:auto;background:#fff;border:1px solid #e0e7ef;border-radius:10px}table{width:100%;border-collapse:collapse;white-space:nowrap}th,td{text-align:left;padding:13px 15px;border-bottom:1px solid #edf1f6}th{background:#edf2f9;color:#465a6b;font-size:13px}tr:last-child td{border:0}.search{display:flex;gap:10px;margin-bottom:20px}.search input{flex:1}.panel{max-width:560px;display:grid;gap:8px;background:white;padding:26px;border:1px solid #e0e7ef;border-radius:12px}.panel label{font-weight:650;margin-top:8px}input,select{width:100%;border:1px solid #c7d4e0;border-radius:7px;padding:11px;font:inherit;background:white}.panel .btn{margin-top:17px}.error{color:#ac233d}.notice{background:#e4f5e9;border:1px solid #a4d6b0;padding:12px;border-radius:7px;margin-bottom:20px}footer{font-size:13px;color:#7b8a98;padding-bottom:25px}@media(max-width:700px){.top,.heading{align-items:flex-start;flex-direction:column}.stats{grid-template-columns:1fr}.search{flex-wrap:wrap}.search input{min-width:100%}}
.stats.four{grid-template-columns:repeat(4,minmax(0,1fr))}.category-block{margin:26px 0 36px}.category-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.category-heading h2{font-size:22px;margin:0}.category-heading span,.help{font-size:13px;color:#607388}.empty{text-align:center;color:#8493a3;padding:20px}.panel .help{margin:-4px 0 2px}.category-block table td:nth-child(2){white-space:normal;min-width:220px}@media(max-width:900px){.stats.four{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:550px){.stats.four{grid-template-columns:1fr}.category-heading{align-items:flex-start;flex-direction:column}}

/* Version 3 dashboard controls and five-card totals. */
.stats.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.dashboard-filters{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:20px;padding:16px;background:#fff;border:1px solid #e0e7ef;border-radius:10px}
.filter-field{display:flex;flex-direction:column;gap:5px}
.filter-field label{font-size:13px;font-weight:650;color:#465a6b}
.filter-search{flex:1 1 270px}.filter-category{flex:0 1 210px}
.dashboard-filters .btn{white-space:nowrap;min-height:46px;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:1100px){.stats.five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.stats.five{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-category{flex:1 1 170px}}
@media(max-width:450px){.stats.five{grid-template-columns:1fr}.dashboard-filters .btn{flex:1 1 100%}}

/* V4 design refresh: light inventory dashboard, readable data density and resizable columns. */
:root { --navy:#132c47; --accent:#2563eb; --muted:#697b91; --border:#e0e7f1; --surface:#fff; }
body { background:#f5f7fb; color:#203047; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
.shell { width:min(1560px,calc(100% - 48px)); }
.app-header { background:var(--navy); box-shadow:0 3px 16px rgba(19,44,71,.10); }
.top { min-height:74px; padding:12px 0; }
.brand { display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; font-weight:750; font-size:17px; letter-spacing:-.3px; }
.brand em { font-style:normal; color:#aacdfd; }
.brand-mark { width:39px; height:39px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; background:linear-gradient(135deg,#3a85f5,#1654bb); font-size:13px; font-weight:850; color:#fff; }
nav { gap:7px; }
nav a { border-radius:9px; padding:9px 13px; font-size:13px; font-weight:620; transition:background .15s; }
nav a:hover,nav a.active { background:rgba(255,255,255,.15); color:#fff; }
main { padding-top:34px; }
.dashboard-title { margin-bottom:24px; }
.eyebrow { display:block; color:#4774ab; font-size:11px; font-weight:800; letter-spacing:1.4px; margin-bottom:6px; }
h1 { letter-spacing:-1px; font-size:clamp(27px,3vw,36px); line-height:1.18; }
.heading p { margin:9px 0 0; }
.btn { border-radius:9px; background:#2463d9; box-shadow:0 2px 4px rgba(25,74,146,.08); }
.btn:hover { background:#174eb8; }
.btn.secondary { background:#edf2f9; color:#284868; box-shadow:none; }
.btn.secondary:hover { background:#e2eaf4; }
.dashboard-filters { border-radius:14px; padding:19px; box-shadow:0 3px 16px rgba(25,52,89,.035); gap:12px; }
input,select { border-radius:9px; min-height:44px; }
input:focus,select:focus { outline:2px solid #a3c5fd; outline-offset:1px; }
.stats.five { gap:13px; margin:0 0 28px; }
.stats.five .metric { position:relative; padding:19px 20px 18px; border:1px solid var(--border); border-radius:14px; box-shadow:0 4px 15px rgba(31,52,88,.035); overflow:hidden; }
.metric:before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:#64748b; }
.metric.metric-bought:before { background:#2563eb; }
.metric.metric-sales:before { background:#7c3aed; }
.metric.metric-returned:before { background:#0891b2; }
.metric.metric-damaged:before { background:#dc6551; }
.metric.metric-stock:before { background:#16a34a; }
.stats .metric span { color:#607389; font-size:12px; font-weight:650; }
.stats .metric span small { color:#95a1b2; font-weight:500; }
.stats .metric strong { display:block; font-size:clamp(24px,2.6vw,33px); line-height:1.3; letter-spacing:-1px; font-variant-numeric:tabular-nums; margin-top:8px; }
.metric-stock strong { color:#168143; }
.category-block { margin:27px 0 34px; }
.category-heading { margin:0 0 10px; }
.category-heading h2 { font-size:21px; letter-spacing:-.5px; }
.category-count { border:1px solid #dfe6f0; background:#fff; padding:8px 12px; border-radius:999px; font-size:12px; font-weight:650; }
.resize-hint { margin:0 0 9px; font-size:12px; color:var(--muted); }
.stock-grid-wrap { border-radius:14px; box-shadow:0 4px 20px rgba(25,52,89,.035); }
.resizable-stock-grid { table-layout:fixed; border-collapse:separate; border-spacing:0; }
.resizable-stock-grid th,.resizable-stock-grid td { padding:13px 15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.resizable-stock-grid thead th { position:relative; background:#edf3fa; color:#40566f; font-weight:750; border-bottom:1px solid #dbe5ef; user-select:none; }
.resizable-stock-grid tbody tr:nth-child(even) { background:#f9fbfd; }
.resizable-stock-grid tbody tr:hover { background:#edf5ff; }
.resizable-stock-grid td:nth-child(n+6) { text-align:right; font-variant-numeric:tabular-nums; }
.resizable-stock-grid th:nth-child(n+6) { text-align:right; padding-right:20px; }
.resizable-stock-grid td:nth-child(2) { min-width:0; white-space:nowrap; }
.resizable-stock-grid td:last-child strong { color:#137c42; background:#e9f8ef; padding:5px 10px; border-radius:7px; }
.resizable-stock-grid .column-resize-handle { position:absolute; top:0; right:0; bottom:0; width:10px; cursor:col-resize; touch-action:none; z-index:3; }
.resizable-stock-grid .column-resize-handle:after { content:""; position:absolute; top:28%; bottom:28%; right:4px; width:2px; border-radius:2px; background:#b3c5d9; }
.resizable-stock-grid .column-resize-handle:hover:after,.resizable-stock-grid .column-resize-handle.resizing:after,.resizable-stock-grid .column-resize-handle:focus-visible:after { background:#2563eb; width:3px; }
.resizable-stock-grid .column-resize-handle:focus-visible { outline:2px solid #2563eb; outline-offset:-1px; }
.column-resize-active, .column-resize-active * { cursor:col-resize!important; user-select:none!important; }
.notice { border-radius:10px; }
.panel { border-radius:14px; box-shadow:0 4px 14px rgba(25,52,89,.04); }
footer { display:flex; justify-content:space-between; gap:15px; border-top:1px solid var(--border); padding-top:20px; }
.footer-rule { color:#8796a8; }
@media(max-width:1000px){ .shell{width:calc(100% - 30px)} .top{align-items:flex-start;flex-direction:column} .stats.five{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:700px){ .stats.five{grid-template-columns:repeat(2,minmax(0,1fr))} .category-heading{align-items:flex-start} footer{flex-direction:column} }
@media(max-width:420px){ .stats.five{grid-template-columns:1fr} }

/* v5 secure sign-in */
.logout-form{display:flex;align-items:center;gap:12px;margin:0}.signed-in{color:#d6e7f7;font-size:13px}.logout-btn{border:1px solid #7891b1;background:transparent;color:white;padding:8px 13px;border-radius:9px;cursor:pointer}.logout-btn:hover{background:#34506b}
.login-layout{min-height:68vh;display:grid;place-items:center;padding:42px 16px}.login-panel{width:min(100%,470px);padding:40px;border:1px solid #dbe5ef;background:white;border-radius:22px;box-shadow:0 20px 55px #152c4819}.login-panel h1{margin:12px 0 5px}.login-panel p{color:#5b6c7e}.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:32px;font-weight:750;color:#203e5a}.login-brand::first-letter{color:#2764a7}.login-panel form{display:flex;flex-direction:column;gap:10px;margin-top:25px}.login-panel label{font-weight:650}.login-panel input:not([type=hidden]){height:46px;padding:11px 13px;border:1px solid #bdccd9;border-radius:10px}.login-submit{margin-top:14px;justify-content:center;min-height:46px}.validation-summary,.field-validation{color:#a31f27;font-size:13px}.login-panel .help{font-size:12px;margin-top:18px}
@media(max-width:740px){.logout-form{justify-content:flex-end;flex-wrap:wrap}.signed-in{display:none}.login-panel{padding:28px 22px}}

/* V6: three-character stock description autocomplete */
.item-lookup { position:relative; }
.item-lookup .help { margin:7px 0 0; min-height:18px; }
.item-suggestions { position:absolute; top:46px; left:0; right:0; background:white; border:1px solid #b8cbe0; border-radius:10px; box-shadow:0 12px 28px #122d4933; z-index:20; max-height:290px; overflow-y:auto; padding:5px; }
.item-suggestions[hidden], .selected-item[hidden] { display:none; }
.item-suggestion { display:block; width:100%; background:transparent; color:#203047; font:inherit; cursor:pointer; padding:11px 12px; border:0; text-align:left; border-radius:7px; overflow-wrap:anywhere; }
.item-suggestion:hover, .item-suggestion.is-active { background:#eaf2ff; color:#134b9a; }
.item-select-hidden, label[for="ItemId"]:has(+.item-select-hidden) { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.selected-item { background:#e9f8f0; border:1px solid #a9dcc0; border-radius:8px; padding:10px 12px; color:#135c35; font-weight:600; font-size:13px; }