/* Responsive warehouse: cardboard boxes and a wooden shelf, drawn in CSS/SVG. */
:root{--paper:#faf8f2;--green:#496437;--ink:#102a21;--muted:#6d7265;--border:#dbd7ca}
body{background:radial-gradient(ellipse at 30% 0,#fffefa 0,transparent 70%),#faf8f2}.topbar{height:110px;background:#fffdf6;border-bottom:1px solid #cec9ba;padding:0 max(calc((100vw - 1240px)/2),32px)}.brand-logo.supplied-logo{width:550px;max-width:60vw;height:104px;object-fit:contain}.header-actions{gap:12px}.header-actions .text-button{font-weight:600}.private-label{font-size:12px}.primary-nav{display:flex;gap:18px;padding:6px max(calc((100vw - 1176px)/2),32px);border-bottom:1px solid #ccc7b9;background:#fffdf7;min-height:74px}.primary-nav button{display:flex;align-items:center;gap:13px;background:none;color:#65675e;padding:10px 25px;font-size:19px;font-weight:650;border-radius:10px;border-bottom:4px solid transparent;min-height:58px}.primary-nav button span{font-size:29px;line-height:1}.primary-nav button[aria-pressed=true]{background:#e5e8d9;color:#304b23;border-bottom-color:#476137}.primary-nav button:hover{background:#f0efe5}
main{max-width:1240px;padding:26px 32px 24px}.intro{margin:0 0 12px}.intro h1{font-size:44px;letter-spacing:-1.6px;margin:0;line-height:1.1;font-weight:750}.intro .primary{padding:11px 17px;font-size:12px}.intro p{margin:8px 0}.notice{margin:0 0 20px;padding:8px 12px;font-size:11px}.search-wrap{height:59px;border:1px solid #a7aa9e;background:#fffefa;border-radius:12px;padding:0 18px}.search-wrap input{font-size:17px}.search-wrap svg{width:26px;height:26px}.toolbar{margin:18px 0 12px}.toolbar nav{gap:24px}.tab{font-size:12px;padding-bottom:12px}.carton-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 35px;padding:34px 17px 9px 2px}.carton{position:relative;isolation:isolate;min-height:250px;background:linear-gradient(120deg,#edc38e,#dba66c 80%,#ce9559);border:1px solid #986932;border-radius:2px 1px 2px 4px;box-shadow:0 6px 7px #7c613328,8px 15px 20px #94723f14;color:#20180f}
.carton::before{content:"";position:absolute;left:-1px;right:-18px;top:-27px;height:27px;z-index:-1;background:repeating-linear-gradient(2deg,#ffffff10 0px,#ffffff10 1px,transparent 2px,transparent 5px),linear-gradient(135deg,#e4b37c,#f0c595 50%,#d6a369);clip-path:polygon(8% 0,100% 0,calc(100% - 17px) 100%,0 100%);border-top:1px solid #b2814b}
.carton::after{content:"";position:absolute;left:100%;top:-27px;bottom:-1px;width:18px;background:repeating-linear-gradient(89deg,#5739150d 0,#5739150d 1px,transparent 2px,transparent 5px),linear-gradient(90deg,#b27a3e,#986028);clip-path:polygon(0 27px,100% 0,100% calc(100% - 27px),0 100%);filter:drop-shadow(3px 4px 3px #30201020)}
.carton-tape{position:absolute;left:45%;top:0;width:34px;height:29px;background:#a3784290;border-left:1px solid #8e612a65;border-right:1px solid #e6c39485;pointer-events:none}.carton-tape::before{content:"";position:absolute;bottom:100%;left:-1px;width:35px;height:27px;background:#bb8d567d;transform:skewX(-44deg);transform-origin:bottom left;border-left:1px solid #8e612a65;border-right:1px solid #e6c39485}.carton-tools{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2;padding:19px 17px 0}.carton-tools button{width:42px;height:42px;background:transparent;color:#375631;display:grid;place-items:center;border-radius:7px}.carton-tools button:hover{background:#fff7d74a}.carton-tools svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.carton-tools .retire-box{color:#b32f26}.carton-number{display:grid;place-items:center;border-radius:50%;height:44px;width:44px;background:linear-gradient(145deg,#567344,#354f2b);color:#fffdf4;border:1px solid #e0d3a0;font-size:28px;font-weight:750;box-shadow:0 1px 2px #543e2620}.carton-open{width:100%;min-height:183px;border-radius:0 0 3px 3px;padding:22px 14px 17px;background:repeating-linear-gradient(12deg,#ffffff04 0px,#ffffff04 1px,transparent 2px,transparent 4px);color:#20180f;text-align:center;display:flex;flex-direction:column;align-items:center}.carton-open:hover{background-color:#fff8dd19}.carton-open h2{font-size:clamp(23px,2.45vw,30px);line-height:1.17;font-weight:750;margin:0 0 13px;letter-spacing:-.8px;overflow-wrap:anywhere}.carton-open p{font-size:17px;line-height:1.5;color:#312616;margin:0 0 12px;max-width:245px}.carton-open>span{font-size:10px;letter-spacing:.2px;color:#624925;margin-top:auto}.shelf-area{margin-top:40px}.shelf-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.shelf-heading h2{font-size:32px;font-weight:750;margin:0;letter-spacing:-.8px}.shelf-heading p{margin:3px 0;color:#7f542c;font-size:16px}.shelf-heading button{display:flex;align-items:center;gap:6px}.shelf-heading svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}.wood-shelf{width:100%;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border:12px solid #8d5a32;border-top:13px solid #a67447;border-bottom:12px solid #a67447;border-radius:3px;background:repeating-linear-gradient(2deg,#724925 0,#7f522b 2px,#643a1f 3px,#6e4226 5px);box-shadow:0 10px 16px #70583a27,inset 0 10px 12px #2b180e9e;position:relative}.wood-shelf::before{content:"";position:absolute;top:-13px;left:-13px;right:-13px;height:8px;background:repeating-linear-gradient(0deg,#d0a579 0,#d0a579 1px,#8c5a33 2px,#a6764b 3px);border:1px solid #724725;border-radius:2px;pointer-events:none}.wood-shelf .shelf-compartment{padding:12px 12px 7px;min-width:0;background:linear-gradient(90deg,#27170944,transparent 35%,#311c1022);border-right:9px solid #a3764b;box-shadow:inset -5px 0 7px #1d100b60;display:flex;align-items:center;flex-direction:column}.wood-shelf .shelf-compartment:last-child{border-right:0}.wood-shelf:hover .shelf-compartment{background-color:#e8c48b20}.wood-shelf svg{display:block;width:100%;height:auto;max-height:155px;filter:drop-shadow(5px 7px 5px #100b0860)}.wood-shelf .shelf-compartment>span{padding:6px 17px;min-width:120px;max-width:100%;background:#fff8e7;border:1px solid #c9baa1;border-radius:4px;color:#17261c;font-weight:650;font-size:14px;box-shadow:1px 3px 4px #25190755}.shelf-all{text-align:center;font-size:13px;color:var(--muted);display:block;margin:11px auto 0}.archived{margin-top:20px;padding:15px;border:1px solid var(--border);border-radius:9px;font-size:13px}.archived summary{cursor:pointer}.archived button{margin:12px 10px 0 0}
.movement-layout{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(340px,1.1fr);gap:28px;margin-top:24px}.movement-form{background:#fffefa;border:1px solid #d3d8c9;border-radius:14px;padding:25px;align-self:start;box-shadow:0 4px 14px #21302005}.movement-form h2,.movement-history h2{font-size:23px;font-weight:700}.movement-form input,.movement-form select,.movement-form textarea,#box-name,#box-description{width:100%;border:1px solid #cdd4c2;background:#fcfdf8;border-radius:8px;padding:12px;font:inherit;color:var(--ink);min-height:46px}.movement-form textarea,#box-description{resize:vertical}.movement-form label{margin-top:18px}.movement-form small{font-weight:400;color:var(--muted)}.movement-form .primary{width:100%;margin-top:20px;min-height:46px}.movement-history>p{font-size:12px}.history-list{display:grid;gap:12px}.history-list article{padding:17px 20px;border:1px solid var(--border);border-radius:11px;background:#fffefa}.history-list article>div{display:flex;justify-content:space-between;gap:10px}.history-list p{font-size:12px;margin:7px 0}.history-list small{font-size:10px;color:var(--muted)}.movement-quantity{white-space:nowrap;font-weight:750;font-size:16px;color:#456739}.movement-quantity.exit{color:#9d482e}.danger-button{padding:12px 16px;border-radius:8px;background:#ad3f31;color:white;font-weight:600}.login-screen .primary-nav{display:none}
@media(min-width:1500px){main{padding:26px 32px 24px}}
@media(min-width:650px) and (max-width:1000px){.carton-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 35px}.carton{min-height:255px}.carton-open h2{font-size:29px}.topbar{padding:0 25px}.brand-logo.supplied-logo{width:440px;max-width:58vw}.primary-nav{padding-left:26px}.movement-layout{grid-template-columns:1fr 1fr;gap:18px}.movement-form{padding:19px}.wood-shelf .shelf-compartment>span{min-width:0;font-size:12px;padding:7px 10px}.wood-shelf .shelf-compartment{padding:10px 8px 7px}.private-label{display:none}}
@media(max-width:649px){.topbar{height:84px;padding:0 14px}.brand-logo.supplied-logo{width:290px;max-width:60vw;height:79px}.header-actions{gap:0}.header-actions .private-label{display:none}.header-actions .text-button{padding:10px 7px;font-size:11px;min-height:44px}.primary-nav{gap:4px;padding:4px 12px;min-height:61px;justify-content:space-between}.primary-nav button{gap:8px;font-size:14px;padding:8px 12px;min-height:50px;flex:1;justify-content:center;border-radius:7px}.primary-nav button span{font-size:23px}main{padding:20px 18px}.intro{display:flex;align-items:center;gap:12px;margin-bottom:14px}.intro h1{font-size:35px}.intro .primary{font-size:11px;padding:12px 10px;margin:0}.intro .primary span{display:none}.intro p{font-size:12px}.search-wrap{height:54px;padding:0 13px}.search-wrap input{font-size:14px}.toolbar{gap:6px;margin:17px 0 12px}.toolbar nav{gap:13px}.tab{font-size:11px}.tab span{font-size:9px;margin-left:3px}.toolbar>.text-button{font-size:0;width:29px;min-height:32px}.carton-grid{grid-template-columns:1fr;gap:51px;padding:34px 18px 8px 2px}.carton{min-height:242px}.carton-open{min-height:168px;padding:15px 18px 18px}.carton-open h2{font-size:31px}.carton-open p{font-size:18px;max-width:270px}.carton-tools{padding:17px 19px 0}.carton-tools button{width:44px;height:44px}.carton-number{height:45px;width:45px}.shelf-area{margin-top:34px}.shelf-heading h2{font-size:30px}.shelf-heading p{font-size:13px;max-width:250px}.wood-shelf{grid-template-columns:1fr;border-width:11px}.wood-shelf .shelf-compartment{border-right:0;border-bottom:11px solid #a67447;padding:10px 23px 11px}.wood-shelf .shelf-compartment:last-child{border-bottom:0}.wood-shelf svg{max-height:160px}.wood-shelf .shelf-compartment>span{font-size:15px;min-width:150px}.movement-layout{grid-template-columns:1fr;gap:24px;margin-top:12px}.movement-form{padding:20px}.movement-form input,.movement-form select,.movement-form textarea{font-size:16px}.movement-history .empty{padding:30px 15px}.table-wrap{overflow:visible;background:none;border:0}.table-wrap table{display:block;min-width:0;width:100%}.table-wrap thead{display:none}.table-wrap tbody{display:grid;gap:12px}.table-wrap tr{display:block;background:#fffefa;border:1px solid var(--border);border-radius:10px;padding:14px}.table-wrap td{display:block;padding:6px 0;border:0;overflow-wrap:anywhere}.table-wrap td:first-child{font-size:17px}.table-wrap td:last-child{text-align:right}.table-wrap .edit-button{min-height:42px;min-width:70px}.badges{gap:6px}.badge{white-space:normal;font-size:12px}.section-head h2{font-size:23px}.notice{font-size:10px;margin-bottom:17px}#users-list table{min-width:0}#users-dialog{padding:18px}dialog{max-height:92dvh}.dialog-footer button{min-height:44px}.shelf-heading button{font-size:12px}.status{font-size:12px}}
@media(prefers-reduced-motion:no-preference){.carton{transition:filter .15s}.carton:hover{filter:brightness(1.015)}}
.carton-tool-spacer{width:42px;height:42px}.box-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:16px 0 22px}.box-navigation .back{margin:0;min-height:46px;padding:12px 18px;scroll-margin-top:20px}.box-navigation .secondary{min-height:44px}@media(max-width:649px){.carton-tool-spacer{width:44px;height:44px}.box-navigation{align-items:stretch}.box-navigation button{width:100%}}
.product-actions{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap}.product-actions button{min-height:44px;padding:9px 12px;white-space:nowrap;border-radius:8px}.stock-out{color:#953a29;background:#f7e8e1}.stock-in{color:#345529;background:#e7eddf}#stock-amount,#stock-note{width:100%;padding:12px;border:1px solid var(--border);border-radius:8px;font:inherit;font-size:16px}#stock-context{line-height:1.6}#stock-dialog{max-width:520px}
.selection-cell{width:46px;text-align:center}.selection-cell input,.bulk-toolbar input,.bulk-confirm input{width:20px;height:20px;accent-color:var(--green);cursor:pointer}.selected-row{background:#edf2e5!important}.bulk-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px;margin:0 0 16px;background:#edf0e5;border:1px solid var(--border);border-radius:10px}.bulk-toolbar label{display:flex;align-items:center;gap:8px;margin:0}.bulk-toolbar>div{display:flex;gap:8px;flex-wrap:wrap}.bulk-toolbar button{min-height:44px}.product-actions .edit-button{display:grid;place-items:center;min-width:44px}.edit-button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2}.bulk-item{padding:16px 0;border-bottom:1px solid var(--border)}.bulk-item label{font-size:13px;margin-top:10px}.bulk-item select,.bulk-item input,#bulk-to{width:100%;font:inherit;font-size:16px;padding:10px;border:1px solid var(--border);border-radius:7px}.bulk-confirm{display:flex;align-items:flex-start;gap:10px;margin:20px 0}.bulk-confirm input{flex-shrink:0}#bulk-dialog{max-width:620px}#bulk-description{line-height:1.6}@media(max-width:649px){.table-wrap .selection-cell{width:auto;text-align:left}.bulk-toolbar>div{width:100%}.bulk-toolbar button{flex:1}.table-wrap .product-actions .edit-button{min-width:44px}}
@media(max-width:649px){.table-wrap td:nth-child(2){font-size:17px}.selection-cell input{min-width:24px;min-height:24px}.bulk-toolbar label{min-height:44px}}