/* Light and dark, following the device (the dark set is at the end). One stylesheet, two surfaces. Desktop is dense and informational; mobile is thumb-sized because it is used standing up, one-handed, wearing gloves. */ :root{--bg:#f3f5f8;--ink:#1d2733;--muted:#66788a;--line:#dbe2e8;--card:#fff;--field:#fff; --in:#1f9d6b;--out:#d26a1e;--warn:#b98a00;--bad:#d64532;--accent:#1f6fd1;--radius:10px} *{box-sizing:border-box} :root{color-scheme:light dark} body{margin:0;font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Thai",sans-serif;background:var(--bg);color:var(--ink)} a{color:var(--accent)} h1{font-size:22px;margin:16px 0 12px}h2{font-size:15px;margin:0 0 10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .muted{color:var(--muted)}.small{font-size:13px}.center{text-align:center}.num{text-align:right;font-variant-numeric:tabular-nums} .err{background:#fde4e1;color:#b3261e;padding:8px 10px;border-radius:6px;margin:0 0 10px} /* desktop */ .topbar{display:flex;align-items:center;gap:18px;background:#fff;color:var(--ink);padding:0 22px;height:52px;border-bottom:1px solid var(--line);box-shadow:0 1px 3px rgba(20,40,60,.06)} .topbar a{color:#3d4b59;text-decoration:none}.topbar a:hover{color:var(--ink)} .topbar .brand{font-weight:700;letter-spacing:.14em;color:var(--ink);display:flex;align-items:center}.topbar .brand img{height:30px;display:block}.topbar .spacer{flex:1}.topbar .who{color:var(--muted);font-size:13px} .topbar .sysname{font-weight:800;letter-spacing:.06em;color:var(--ink);font-size:15px;text-decoration:none;margin-right:6px;white-space:nowrap} .topbar .sysname:hover{color:var(--ink)} .topbar .navlink{padding:6px 12px;border-radius:7px;transition:background .12s,color .12s} .topbar .navlink:hover{background:rgba(20,40,60,.06)} .topbar .navlink.active{color:var(--accent);background:rgba(31,111,209,.10);box-shadow:inset 0 -2px 0 var(--accent)} .topbar{position:relative} /* the menu wrapper is invisible to the flex layout on wide screens */ .navmenu{display:contents} .navtoggle{display:none} /* every menu item (and Logout) has to fit on one bar down to 1101px, where it folds */ @media(max-width:1600px){.topbar{gap:8px}.topbar .navlink{padding:6px 8px}} @media(max-width:1700px) and (min-width:1101px){.topbar .sysname{display:none} .topbar .scanlink .arr,.topbar .who .role{display:none}} @media(max-width:1300px) and (min-width:1101px){.topbar{gap:4px;padding:0 14px}.topbar .navlink{padding:6px 6px;font-size:14px} .topbar .scanlink .lbl{display:none}} /* tablets and phones: menu folds into a dropdown */ @media(max-width:1100px){ .topbar{gap:12px;padding:0 14px} .navtoggle{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:7px 12px;border-radius:8px; background:transparent;border:1px solid var(--line);color:var(--ink);font-size:15px;font-weight:600} .navtoggle[aria-expanded="true"]{background:rgba(31,111,209,.10);border-color:var(--accent);color:var(--accent)} .navmenu{display:none;position:absolute;top:52px;left:0;right:0;z-index:2000;flex-direction:column;align-items:stretch;gap:2px; padding:8px 10px 12px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(20,40,60,.14)} .navmenu.open{display:flex} .topbar .navmenu .navlink{padding:11px 12px;font-size:16px} .navmenu .spacer{display:none} .navmenu .who{padding:10px 12px 4px;margin-top:6px;border-top:1px solid var(--line)} .navmenu .logout{padding:6px 12px 8px} /* wide tables scroll inside the page body, so the page (and the bar) stay screen-wide */ body.desktop > main{overflow-x:auto} } @media(max-width:520px){.topbar .sysname{display:none}} .login-logo{display:block;width:150px;max-width:70%;height:auto;margin:0 auto 14px} .mlogo{display:block;width:140px;max-width:60%;height:auto;margin:2px auto 14px} .wrap{width:100%;margin:0;padding:6px 22px 60px} .centered{display:flex;min-height:100vh;align-items:center;justify-content:center} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:16px;box-shadow:0 1px 2px rgba(20,40,60,.05)} .cols{display:grid;grid-template-columns:1fr 1fr;gap:16px} .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px} .kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;text-decoration:none;color:var(--muted);font-size:13px} .kpi span{display:block;font-size:30px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} .kpi.warn span{color:var(--bad)} table{width:100%;border-collapse:collapse;font-size:14px} th{text-align:left;color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em} th,td{padding:7px 8px;border-bottom:1px solid var(--line)} table.kv td:first-child{color:var(--muted);width:40%} .list{padding:0;overflow:hidden} .filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .filters input{flex:1;min-width:220px} .filters .spacer{flex:1 0 0;min-width:0} @media(max-width:640px){.filters .spacer{display:none}} input,select{padding:9px 10px;border:1px solid var(--line);border-radius:7px;font:inherit;background:var(--field);color:var(--ink)} input::placeholder{color:var(--muted)} button,.btn{padding:9px 14px;border:0;border-radius:7px;background:var(--accent);color:#fff;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block} .ghost{background:transparent;color:var(--muted);border:1px solid var(--line)} .pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;background:#eceff1;color:#455a64} .pill.in_stock,.pill.in,.pill.ok,.pill.new_tag{background:#dff3ea;color:#1f7a55} .pill.issued,.pill.out{background:#fde7d9;color:#b4501a} .pill.missing,.pill.invalid,.pill.not_in_stock{background:#fde4e1;color:#b3261e} .pill.moved,.pill.unexpected,.pill.duplicate,.pill.already_in_stock,.pill.adjust_add,.pill.adjust_remove{background:#fdf3d3;color:#8a6100} .login{width:340px}.login input,.login button{width:100%;margin-bottom:10px} /* material card-grid view */ .viewtoggle{display:inline-flex;gap:0} .viewtoggle .btn{border-radius:0}.viewtoggle .btn:first-child{border-radius:7px 0 0 7px}.viewtoggle .btn:last-child{border-radius:0 7px 7px 0;border-left:0} .viewtoggle .btn.active{background:var(--accent);color:#fff;border-color:var(--accent)} .cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-bottom:16px} .item-card{display:flex;flex-direction:column;gap:8px;padding:14px;margin:0;color:var(--ink);text-decoration:none;transition:border-color .12s,box-shadow .12s} .item-card:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(20,80,125,.10)} .item-card .ic-top{display:flex;align-items:center;justify-content:space-between;gap:8px} .item-card .ic-tag{font-size:12px;color:var(--muted);font-family:ui-monospace,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .item-card .ic-part{font-size:18px;font-weight:700;line-height:1.2} .item-card .ic-spec{font-size:13px} .item-card .ic-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin:2px 0 0} .item-card .ic-meta>div{display:flex;flex-direction:column} .item-card .ic-meta dt{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)} .item-card .ic-meta dd{margin:0;font-size:14px;font-variant-numeric:tabular-nums} .item-card .ic-foot{font-size:12px;border-top:1px solid var(--line);padding-top:8px;margin-top:2px} .pad{padding:16px} /* location card-grid view */ .loc-card{display:flex;flex-direction:column;gap:8px;padding:14px;margin:0;color:var(--ink);text-decoration:none;transition:border-color .12s,box-shadow .12s} .loc-card:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(20,80,125,.10)} .loc-card .ic-top{display:flex;align-items:center;justify-content:space-between;gap:8px} .loc-card .lc-shelf{font-size:18px;font-weight:700;font-family:ui-monospace,Consolas,monospace} .loc-card .lc-count{font-size:20px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums} .loc-card .lc-count.has{color:var(--in)} .loc-card .lc-qr code{font-size:12px;word-break:break-all} .loc-card .ic-foot{font-size:11px;text-transform:uppercase;letter-spacing:.04em;border-top:1px solid var(--line);padding-top:8px;margin-top:2px} /* location column view (cards): a shelf per column, a card per in-stock tag */ /* one row per shelf-code prefix; a long row scrolls sideways on its own */ .loc-group{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px 4px;margin-bottom:12px} .loc-group-head{font-family:ui-monospace,Consolas,monospace;margin-bottom:8px} /* --per-row columns fit the row width exactly; past that the row scrolls. The 34px floor keeps labels legible on narrow screens (they scroll sooner). */ .loc-cols{--per-row:40;--col-gap:4px;display:flex;flex-wrap:nowrap;align-items:stretch;gap:var(--col-gap);overflow-x:auto;padding-bottom:10px;scrollbar-color:var(--line) transparent} .loc-cols::-webkit-scrollbar{height:8px}.loc-cols::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px} .loc-col{display:flex;flex-direction:column;min-width:0;flex:0 0 max(34px, calc((100% - (var(--per-row) - 1) * var(--col-gap)) / var(--per-row)))} .col-stack{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;min-height:70px;background:var(--field);border:1px solid var(--line);border-radius:5px;padding:2px} .col-card{height:12px;border-radius:2px;background:var(--muted);opacity:.92;display:block;text-decoration:none;transition:transform .08s,opacity .08s;cursor:pointer} .col-card:hover{opacity:1;transform:scale(1.08);outline:2px solid var(--accent);z-index:5;position:relative} /* coloured by aging grade (same scale as the dashboard) */ .col-card.gA{background:#1f7a52}.col-card.gB{background:#3f7a2f}.col-card.gC{background:#6b7320}.col-card.gD{background:#8a7412} .col-card.gE{background:#8a5a12}.col-card.gF{background:#8a4310}.col-card.gG{background:#8a2f1a}.col-card.gH{background:#7a2a24} .grade-legend{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px;font-size:12px} .grade-legend .gl-item{display:inline-flex;align-items:center;gap:4px} .grade-legend .gl-swatch{width:12px;height:12px;border-radius:3px;display:inline-block} .col-label{text-align:center;font-family:ui-monospace,Consolas,monospace;font-weight:700;font-size:10px;margin-top:4px;word-break:break-all;line-height:1.15;letter-spacing:-.02em} .col-label .col-count{display:block;font-size:10px;color:var(--muted);font-weight:600} /* sortable tables */ th.th-sort{cursor:pointer;user-select:none;white-space:nowrap} th.th-sort:hover{color:var(--ink)} th.th-sort::after{content:"\2195";opacity:.35;margin-left:4px;font-size:10px} th.th-sort[aria-sort="ascending"]::after{content:"\2191";opacity:1} th.th-sort[aria-sort="descending"]::after{content:"\2193";opacity:1} th.th-sort:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} /* server-side sort header links (Materials) */ th .sortlink{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:3px;cursor:pointer;font:inherit;font-weight:600;white-space:nowrap} th .sortlink:hover{color:var(--ink)} th .sortlink::after{content:"\2195";opacity:.3;font-size:10px} th .sortlink.asc::after{content:"\2191";opacity:1} th .sortlink.desc::after{content:"\2193";opacity:1} .perpage{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;white-space:nowrap} .perpage select{width:auto;min-width:0} .pager{display:flex;gap:14px;align-items:center;justify-content:center} .filters input.date{flex:0 0 auto;min-width:0;width:auto} td.nowrap{white-space:nowrap} .pill.move{background:#e3eefc;color:#1f5fae} .inline{display:flex;gap:8px;margin-top:12px} /* dashboard: in/out chart */ .dash-actions{margin:0 0 16px} .chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .chart-head h2{margin:0} .legend{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px} .legend .lg{width:10px;height:10px;border-radius:2px;display:inline-block;margin-left:8px} .legend .lg.in{background:var(--in)}.legend .lg.out{background:var(--out)} .io-chart{width:100%;height:auto;display:block;margin-top:10px} .io-chart .bar.in{fill:var(--in)}.io-chart .bar.out{fill:var(--out)} .io-chart .axis{stroke:var(--line);stroke-width:1} .io-chart .xlab{fill:var(--muted);font-size:11px;text-anchor:middle} /* dashboard: FIFO aging grades */ .grades{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin:2px 0 14px} .grade{border-radius:10px;padding:10px 6px;text-align:center;color:#fff;text-decoration:none;display:flex;flex-direction:column;gap:2px} .grade:hover{filter:brightness(1.12)} .grade .gletter{font-size:11px;opacity:.9;font-weight:700} .grade .gcount{font-size:22px;font-weight:800;line-height:1;color:#fff} .grade .glabel{font-size:10px;opacity:.9} .gpill{display:inline-block;min-width:20px;text-align:center;border-radius:6px;font-weight:800;font-size:11px;padding:1px 6px;color:#fff} .gA{background:#1f7a52}.gB{background:#3f7a2f}.gC{background:#6b7320}.gD{background:#8a7412} .gE{background:#8a5a12}.gF{background:#8a4310}.gG{background:#8a2f1a}.gH{background:#7a2a24} @media(max-width:760px){.grades{grid-template-columns:repeat(4,1fr)}} /* location management */ .store-head{margin-bottom:6px} .store-print{display:flex;align-items:center;gap:12px;margin-top:6px;flex-wrap:wrap} .shelf-row .qrpick{width:18px;height:18px;flex:none} .store-code{font-family:ui-monospace,Consolas,monospace;letter-spacing:.05em;font-size:16px} .shelf-list{display:flex;flex-direction:column} .shelf-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);flex-wrap:wrap} .shelf-row .qr-mini{width:40px;height:40px;background:#fff;border:1px solid var(--line);border-radius:4px;padding:2px;flex:0 0 auto} .shelf-row .code-in{width:150px;font-family:ui-monospace,Consolas,monospace;font-weight:700} .shelf-row input[name=description]{flex:1;min-width:140px} .shelf-row .spacer{flex:1} .addshelf{margin-top:12px;border-top:1px dashed var(--line);padding-top:12px} /* printable QR label sheet */ /* every label the same size: fixed columns, and a label never widens for its text (it shrinks to fit) */ .qr-sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,190px));gap:12px;justify-content:start} .qr-label{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:8px;padding:12px;text-align:center;background:#fff;color:#12212e} .qr-label img{width:100%;max-width:150px;height:auto;display:block;margin:0 auto} /* the shelf code is what the floor reads from a distance: big and bold; the store small and light under it */ .qr-label .qr-loc{font-family:Tahoma,"Arial Black",Arial,sans-serif;font-weight:800;font-size:34px;line-height:1.1;margin-top:6px;letter-spacing:.01em;color:#000;overflow:hidden} .qr-label .qr-loc .fit{display:inline-block;white-space:nowrap} .qr-label .qr-store{font-size:13px;font-weight:300;color:#555;margin-top:2px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media print{ .topbar,.noprint{display:none !important} body{background:#fff !important} .wrap{max-width:none;padding:0} .qr-sheet{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .qr-label{border-color:#000;break-inside:avoid} } /* mobile */ body.mobile{background:var(--bg);color:var(--ink)} .mbar{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5} .mbar .back{color:var(--muted);font-size:26px;text-decoration:none;line-height:1} .mtitle{font-weight:700;flex:1}.muser{font-size:12px;color:var(--muted)} .mwrap{padding:14px;padding-bottom:90px;width:100%} .mcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px;box-shadow:0 1px 2px rgba(20,40,60,.05)} .mcard input{width:100%;margin-bottom:10px;background:var(--field);border-color:var(--line);color:var(--ink)} button.big,.big.btn{width:100%;padding:16px;font-size:17px;border-radius:12px;text-align:center} .menu{display:grid;grid-template-columns:1fr 1fr;gap:12px} .reqpick,.reqbar{border-left:4px solid #e0803a} .rq-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px} .rq-head b{font-size:17px} .rq-lines{list-style:none;margin:6px 0 10px;padding:0} .rq-lines li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);font-size:14px} .rq-lines li.done{opacity:.5} .rq-table{width:100%;font-size:14px}.rq-table th,.rq-table td{padding:5px 4px}.rq-table tr.done{opacity:.55} .tile{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px; padding:26px 10px;border-radius:16px;text-decoration:none;color:#fff;font-weight:700;font-size:17px;background:#4a5d70} .tile .ico{font-size:30px} .tile.in{background:#1d8a5a}.tile.out{background:#c2601c}.tile.chk{background:#1f6fd1}.tile.hist{background:#6b4fa0} .reader{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:4/3;margin-bottom:12px} .reader video{width:100%;height:100%;object-fit:cover} .reader::after{content:"";position:absolute;inset:18% 12%;border:3px solid rgba(255,255,255,.75);border-radius:12px} .scanhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px} .counter{text-align:right}.counter span{font-size:32px;font-weight:800;display:block;line-height:1} .counter small{color:var(--muted);font-size:11px;text-transform:uppercase} .manualrow{display:flex;gap:8px;margin-bottom:12px}.manualrow input{flex:1;background:var(--field);border-color:var(--line);color:var(--ink)} .lines{list-style:none;padding:0;margin:0} .lines li{background:var(--card);border:1px solid var(--line);border-left:5px solid #b8c4ce;border-radius:8px;padding:10px 12px;margin-bottom:8px;display:flex;align-items:center;gap:10px} .lines .ln-main{flex:1;min-width:0;overflow:hidden} .lines .ln-tag{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lines .ln-sub{display:block;font-size:13px;color:#4a5a6a;margin-top:1px} .lines .ln-res{display:block;font-size:11px;color:var(--muted);margin-top:1px} .lines .ln-qty{flex:0 0 auto;text-align:right;font-size:26px;font-weight:800;line-height:1;color:var(--ink)} .lines .ln-qty small{display:block;font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em} .lines li.ok,.lines li.new_tag{border-left-color:#2ea36b} .lines li.moved{border-left-color:#5c9ae6} .lines li.duplicate,.lines li.unexpected,.lines li.queued,.lines li.already_in_stock{border-left-color:#d9a520} .lines li.invalid,.lines li.not_in_stock{border-left-color:#e2564c} .footbar{position:fixed;left:0;right:0;bottom:0;display:flex;gap:10px;padding:12px 14px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -2px 10px rgba(20,40,60,.08)} .footbar form{flex:0 0 auto}.footbar .big.btn{flex:1} .toast{position:fixed;left:14px;right:14px;bottom:80px;background:#243447;color:#fff;padding:12px 14px;border-radius:10px;opacity:0;transition:.2s;pointer-events:none;font-size:14px} .toast.show{opacity:1}.toast.bad{background:#7a2a24}.toast.warn{background:#7a5a12}.toast.move{background:#1f4f86} .totals{display:flex;justify-content:space-between;text-align:center} .totals span{display:block;font-size:26px;font-weight:800}.totals div{font-size:11px;color:var(--muted);text-transform:uppercase} .warnbox{border:1px solid #e0b636}.bad{border:1px solid #e8a39c} .warnbox ul,.bad ul{margin:8px 0 0;padding-left:18px;font-size:13px;color:#4a5a6a} .done{text-align:center}.tick{font-size:56px;color:#2ea36b} .applied{list-style:none;padding:0;color:var(--muted)} .check{display:flex;gap:8px;align-items:center;margin-bottom:12px;font-size:14px} .check input{width:auto;margin:0} .step{color:var(--muted);font-size:13px;margin-top:0} .resume{border:1px solid #9cc0ea} @media(max-width:900px){.cols,.kpis{grid-template-columns:1fr 1fr}} /* Wrong-code stop screen on the scanner pages (see scanner.js blockScan) */ .scanblock{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(90,16,12,.92)} .scanblock.show{display:flex} .sb-box{width:100%;max-width:420px;background:#2a1412;border:2px solid #e2564c;border-radius:14px;padding:20px;text-align:center} .sb-title{font-size:20px;font-weight:700;color:#ff8a80;margin-bottom:10px} .sb-msg{color:#f6d5d1;font-size:15px;line-height:1.4;margin-bottom:18px;word-break:break-all} .sb-ok{width:100%;background:#e2564c;border-color:#e2564c;color:#fff} /* Per-row aging bar on Materials (colours come from the shared .gA..gH scale) */ .agebar{display:inline-block;min-width:64px;padding:2px 8px;border-radius:5px;color:#fff;font-size:12px;font-weight:700;text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums} .ic-meta .agebar{min-width:0;padding:0 6px;font-size:11px;margin-left:4px} .mcard.movebox{border-left:4px solid #5c9ae6} .mcard.movebox ul{margin:6px 0;padding-left:18px;font-size:13px} /* Tags: issue form + list */ .issue-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:16px;align-items:start} @media(max-width:1000px){.issue-grid{grid-template-columns:1fr}} .fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 14px} .fgrid label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)} .fgrid input[readonly]{opacity:.75} table.splits{width:auto;min-width:420px} table.splits input{width:140px} table.splits .rowno{color:var(--muted);width:30px} .ref table.kv td{padding:4px 6px;font-size:13px} .suggest{display:block;width:100%;text-align:left;background:var(--field);color:var(--ink);border:1px solid var(--line);margin-bottom:6px;font-weight:400} .suggest:hover{border-color:var(--accent)} .linkbtn{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-weight:400;cursor:pointer;text-decoration:underline} form.inline{display:inline;margin-left:8px} .small-btn{padding:3px 9px;font-size:12px} .suggest .sg-mat{display:block;font-size:11px;color:var(--muted);font-family:ui-monospace,Consolas,monospace;margin-top:2px} .suggest.picked{border-color:var(--in);box-shadow:inset 3px 0 0 var(--in)} .pill.tag-partial{background:#fdf3d3;color:#8a6100} .pill.tag-tagged{background:#e3eefc;color:#1f5fae} .pill.tag-received{background:#dff3ea;color:#1f7a55} .copybtns{display:inline-flex;gap:4px;margin-left:6px;vertical-align:middle} button.copy{padding:1px 7px;font-size:11px;font-weight:600;background:transparent;color:var(--accent);border:1px solid var(--line);border-radius:5px} button.copy:hover{border-color:var(--accent)} button.copy.done{color:var(--in);border-color:var(--in)} /* requisitions */ .layout-head > .btn{font-size:14px;padding:7px 12px;margin-left:auto} .rqtabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px} .rqtabs a{padding:7px 12px;border-radius:8px;border:1px solid var(--line);color:var(--muted);text-decoration:none;font-size:14px} .rqtabs a b{margin-left:4px;color:var(--ink)} .rqtabs a.on{background:var(--accent);border-color:var(--accent);color:#fff}.rqtabs a.on b{color:#fff} .pill.rq-draft{background:#eceff1;color:#455a64} .pill.rq-pending{background:#fde7d9;color:#b4501a} .pill.rq-issued{background:#dff3ea;color:#1f7a55} .pill.rq-cancelled{background:#fde4e1;color:#b3261e} .late{color:#c62828;font-weight:700} .rq-headfields{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px} .rq-headfields label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)} .rq-headfields label.wide{flex:1;min-width:240px} .rqlines input{width:100%} .pinfo{font-size:12px;margin-top:3px}.pinfo b{color:var(--ink)}.pinfo span{color:var(--muted)}.rqlines td{vertical-align:middle}.rqlines td.n{color:var(--muted);width:24px} .rqlines td:nth-child(3){min-width:260px}.rqlines td.stock{min-width:120px} .rqlines td.unit{min-width:70px}.rqlines .conv{font-size:12px;margin-top:2px;white-space:nowrap}.rqlines .conv b{color:var(--ink)} .rq-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0} .rq-actions form{margin:0;display:flex;gap:8px;align-items:center} tr.rq-done td{opacity:.55} .ghost.danger{color:#c62828;border-color:rgba(214,69,50,.45)} .deptpick{display:flex;gap:6px}.deptpick select{min-width:200px}.deptpick button{padding:6px 12px;font-size:16px;font-weight:700} .modal{position:fixed;inset:0;z-index:3000;background:rgba(20,30,40,.45);display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px} .modal[hidden]{display:none} .modal-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;width:min(560px,100%);max-height:80vh;overflow:auto;box-shadow:0 20px 50px rgba(20,40,60,.25)} .modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.modal-head b{font-size:17px} .modal-head button{padding:2px 10px;font-size:18px} .deptadd{display:flex;gap:8px;margin-bottom:10px}.deptadd input{flex:1} .deptlist input[name=name]{width:100%}.deptlist td{vertical-align:middle} td.locs{max-width:420px} .locchip{display:inline-flex;align-items:center;gap:5px;margin:2px 6px 2px 0;padding:3px 8px;border:1px solid var(--line);border-radius:6px; font-size:12px;color:var(--ink);text-decoration:none;white-space:nowrap} .locchip:hover{border-color:var(--accent)} .locchip i,.rq-where i{display:inline-block;width:8px;height:8px;border-radius:2px} .rq-where{width:100%;font-size:17px;font-weight:700;color:var(--ink);display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:6px} .rq-where span{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:8px;background:var(--bg);border:1px solid var(--line);letter-spacing:.02em} .rq-where span small{font-size:13px;font-weight:600;color:var(--muted)} .rq-where span i{width:12px;height:12px;border-radius:3px} .rq-lines li{flex-wrap:wrap} /* users */ .userform{display:flex;flex-direction:column;gap:12px;max-width:640px} .userform > label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)} .userform label.check{flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-size:14px} .userform fieldset{border:1px solid var(--line);border-radius:8px;padding:8px 12px;display:flex;flex-direction:column;gap:6px} .userform legend{font-size:13px;color:var(--muted);padding:0 4px} .pill.role-admin{background:#fde4e1;color:#b3261e} .pill.role-supervisor{background:#fdf3d3;color:#8a6100} .pill.role-store_keeper{background:#dff3ea;color:#1f7a55} .pill.role-planner{background:#e3eefc;color:#1f5fae} .okmsg{background:#dff3ea;color:#1f7a55;padding:8px 10px;border-radius:6px;margin:0 0 10px} tr.editing td{background:rgba(53,133,196,.08)} .colorpick{display:flex;align-items:center;gap:8px} .colorpick select{flex:1;min-width:0} .swatch{width:34px;height:34px;border-radius:6px;border:1px solid var(--line);flex:none} .swatch.empty{background:repeating-linear-gradient(45deg,transparent 0 4px,var(--line) 4px 5px)!important} .dot{display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid rgba(0,0,0,.25);margin-right:6px;vertical-align:-1px} .warnmsg{background:#fdf3d3;color:#7a5600;padding:8px 10px;border-radius:6px;margin:0 0 10px} .colorform{display:inline-flex;align-items:center;gap:4px;margin:0} .colorform select{padding:3px 6px;font-size:12px} .dot.empty{background:repeating-linear-gradient(45deg,transparent 0 3px,var(--line) 3px 4px)!important} /* one-field date range picker (static/js/daterange.js) */ .drp{position:relative;display:inline-block} .drp-btn{background:var(--field);color:var(--ink);border:1px solid var(--line);font-weight:400;padding:9px 12px;white-space:nowrap} .drp-btn.set{border-color:var(--accent)} .drp-btn .drp-name{color:var(--muted);font-size:13px;margin-right:4px} .drp-btn .drp-any{color:var(--muted)} .drp-btn .drp-caret{color:var(--muted);margin-left:4px} .drp-pop{position:absolute;z-index:40;top:calc(100% + 6px);left:0;width:300px;background:var(--card);border:1px solid var(--line); border-radius:10px;padding:10px;box-shadow:0 10px 28px rgba(20,40,60,.18)} .drp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .drp-nav{background:transparent;color:var(--ink);border:1px solid var(--line);padding:2px 10px;font-size:16px} .drp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .drp-dow{text-align:center;font-size:11px;color:var(--muted);padding:2px 0} .drp-day{background:transparent;color:var(--ink);font-weight:400;padding:6px 0;border-radius:5px;font-size:13px} .drp-day:hover{background:rgba(53,133,196,.25)} .drp-day.today{box-shadow:inset 0 0 0 1px var(--muted)} .drp-day.in{background:rgba(53,133,196,.22);border-radius:0} .drp-day.edge{background:var(--accent);color:#fff;border-radius:5px} .drp-day.blank{pointer-events:none} .drp-hint{font-size:11px;color:var(--muted);margin:6px 0} .drp-presets{display:flex;flex-wrap:wrap;gap:4px;border-top:1px solid var(--line);padding-top:8px} .drp-presets button{background:transparent;color:var(--accent);border:1px solid var(--line);padding:3px 8px;font-size:12px;font-weight:600} .drp-presets .drp-clear{color:var(--muted)} /* icon-only row actions (inline SVG, colour from currentColor) */ td.actions{white-space:nowrap} td.actions form.inline{margin-left:0} .iconbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin-right:4px; border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--accent);vertical-align:middle;cursor:pointer} .iconbtn:hover{border-color:var(--accent);background:rgba(53,133,196,.12)} .iconbtn.danger{color:#c62828} .iconbtn.danger:hover{border-color:#e2564c;background:rgba(226,86,76,.12)} .pill.grp-8{background:#e3eefc;color:#1f5fae} .pill.grp-7{background:#ece4f7;color:#5b3a92} /* mobile search */ .menu.menu-one{grid-template-columns:1fr} .tile small{font-size:12px;font-weight:400;opacity:.85} .mselect{width:100%;margin-bottom:10px;background:var(--field);border-color:var(--line);color:var(--ink)} .tagcard{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px; color:var(--ink);text-decoration:none;border-left:5px solid #b8c4ce} .tagcard:active{background:#eef3f8} .tagcard .tc-main{flex:1;min-width:0} .tagcard .tc-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .tagcard .tc-top .pill{margin-left:auto} .tagcard .tc-part{font-size:16px;font-weight:700;margin-top:2px} .tagcard .tc-sub{font-size:13px;color:#4a5a6a} .tagcard .tc-meta{font-size:12px;color:var(--muted);margin-top:2px} .tc-qty{flex:0 0 auto;text-align:right;font-size:24px;font-weight:800;line-height:1} .tc-qty small{display:block;font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase} .td-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px} .td-run{font-size:20px;font-weight:800} table.mkv td{padding:5px 4px;font-size:14px} table.mkv td:first-child{color:var(--muted);width:38%} /* ---- 3D warehouse (/warehouse3d): a light "control room" card like a sim dashboard; .night flips it dark together with the scene. ---- */ .wh3d-main{padding:12px 16px 16px} .wh3d{--w-bg:#f4f7f9;--w-card:#fff;--w-ink:#1d2733;--w-muted:#6b7a88;--w-line:#e2e8ed;--w-accent:#1f6fd1;--w-ok:#1f9d6b;--w-bad:#d64532; display:flex;flex-direction:column;gap:12px;background:var(--w-bg);color:var(--w-ink);border-radius:14px;padding:14px;min-height:calc(100vh - 52px - 28px)} .wh3d.night{--w-bg:#111b26;--w-card:#18242f;--w-ink:#e9eff4;--w-muted:#8fa1b0;--w-line:#2b3b4c;--w-accent:#5aa2ef} .wh3d .muted{color:var(--w-muted)} .wh3d-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .layout-head{display:flex;align-items:center;gap:14px}.layout-head .viewtoggle{font-size:14px;font-weight:600} .wh3d-tabs{display:inline-flex;border:1px solid var(--w-line);border-radius:9px;overflow:hidden;background:var(--w-card)} .wh3d-tabs a{padding:7px 14px;font-weight:700;font-size:14px;text-decoration:none;color:var(--w-muted)} .wh3d-tabs a.on{background:var(--w-accent);color:#fff} .wh3d-back{font-size:20px;text-decoration:none;color:var(--w-muted);width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid var(--w-line);background:var(--w-card)} .wh3d-title b{display:block;font-size:19px}.wh3d-title span{font-size:12px;color:var(--w-muted)} .wh3d-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--w-ok);background:rgba(31,157,107,.1);border:1px solid rgba(31,157,107,.3);padding:4px 10px;border-radius:999px} .wh3d-live i{width:7px;height:7px;border-radius:50%;background:var(--w-ok);animation:wh3dpulse 1.6s infinite} @keyframes wh3dpulse{50%{opacity:.25}} .wh3d-clock{font-variant-numeric:tabular-nums;color:var(--w-muted);font-size:14px} .wh3d-flex{flex:1} .wh3d-searchbox{position:relative;display:inline-flex} .wh3d #wh3d-search{width:260px;background:var(--w-card);color:var(--w-ink);border-color:var(--w-line);padding:7px 30px 7px 11px} #wh3d-search::-webkit-search-cancel-button{display:none} #wh3d-search-clear{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--w-muted);font-size:18px;line-height:1;cursor:pointer} #wh3d-search-clear:hover{background:var(--w-line);color:var(--w-ink)} #wh3d-search-clear[hidden]{display:none} .wh3d-btn{padding:7px 13px;border-radius:8px;border:1px solid var(--w-line);background:var(--w-card);color:var(--w-ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block;white-space:nowrap} .wh3d-btn:hover{border-color:var(--w-accent)} .wh3d-btn.on{border-color:var(--w-accent);color:var(--w-accent)} .wh3d-btn.primary{background:var(--w-accent);border-color:var(--w-accent);color:#fff} .wh3d-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px} .wh3d-kpi,.wh3d-card{background:var(--w-card);border:1px solid var(--w-line);border-radius:12px;box-shadow:0 1px 3px rgba(20,40,60,.06)} .wh3d-kpi{padding:12px 16px} .wh3d-kpi.link{text-align:left;font:inherit;color:inherit;cursor:pointer} .wh3d-kpi.link:hover{border-color:var(--w-accent)} .wh3d-kpi.link.on{border-color:var(--w-accent);box-shadow:0 0 0 2px var(--w-accent) inset} .wh3d-kpi span{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--w-muted)} .wh3d-kpi b{display:block;font-size:26px;line-height:1.2;font-variant-numeric:tabular-nums} .wh3d-kpi b em{font-style:normal;font-size:16px;color:var(--w-muted);font-weight:600} .wh3d-kpi small{font-size:12px;color:var(--w-ok);font-weight:600}.wh3d-kpi small.wh3d-bad{color:var(--w-bad)} .wh3d-stage{position:relative;flex:1;min-height:560px;border-radius:12px;overflow:hidden;border:1px solid var(--w-line)} .wh3d-canvas{position:absolute;inset:0} .wh3d-stage:fullscreen{border:0;border-radius:0;background:var(--w-bg)} .wh3d-stage.max{position:fixed;inset:0;z-index:1000;min-height:0;border:0;border-radius:0;background:var(--w-bg)} .wh3d-canvas canvas{display:block;width:100%;height:100%;touch-action:none} .wh3d-labels{position:absolute;inset:0;pointer-events:none;z-index:1} .wh3d-card,.wh3d-bottom{z-index:2} .wh3d-label{font:600 11px/1 system-ui,sans-serif;color:#1d2733;background:rgba(255,255,255,.94);border:1px solid #d5dde3;padding:3px 6px;border-radius:5px;box-shadow:0 1px 3px rgba(0,0,0,.12);white-space:nowrap} .wh3d-label.store{font-size:13px;font-weight:800;padding:5px 9px;border-color:#e0b636} .wh3d-label.bldg{font-size:14px;font-weight:800;letter-spacing:.05em;background:#8b1e2d;color:#fff;border-color:#8b1e2d;padding:6px 12px} .wh3d-label.row{font-size:12px;font-weight:800;background:#1d2733;color:#fff;border-color:#1d2733} .wh3d-label.shelf.empty{color:#8fa1b0} .wh3d-label.shelf.warn{background:#fff1db;border-color:#f08a24;color:#a14b00;font-size:12px;font-weight:800;padding:4px 7px} .wh3d-warn{margin:8px 0;padding:6px 9px;border-radius:6px;background:#fff1db;border:1px solid #f5b56a;color:#a14b00;font-weight:700;font-size:13px} .wh3d-label.sel{background:#1f6fd1;color:#fff;border-color:#1f6fd1;font-size:12px;margin-top:var(--bob,0)} .wh3d-card h4{margin:0 0 8px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--w-muted);display:flex;align-items:center;gap:6px} .wh3d-card h4 small{font-weight:500;text-transform:none;letter-spacing:0} .wh3d-side{position:absolute;left:12px;top:12px;width:230px;max-height:calc(100% - 24px);overflow:auto;padding:14px} .wh3d-side ol,.wh3d-side ul{list-style:none;margin:0 0 14px;padding:0} .wh3d-side li{display:grid;grid-template-columns:22px 1fr auto;align-items:center;column-gap:8px;padding:6px 4px;border-bottom:1px solid var(--w-line);cursor:pointer;border-radius:6px} .wh3d-side li:hover,.wh3d-side li.on{background:rgba(31,111,209,.08)} .wh3d-side li .n{font-size:11px;color:var(--w-muted);background:var(--w-bg);border-radius:5px;text-align:center;padding:2px 0} .wh3d-side li b{font-size:14px}.wh3d-side li small{grid-column:2;font-size:11px;color:var(--w-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wh3d-side li em{grid-row:1/3;grid-column:3;font-style:normal;font-weight:700;font-variant-numeric:tabular-nums} .wh3d-deliv{max-height:180px;overflow:auto} .wh3d-deliv li b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wh3d-deliv li em{grid-row:auto} .wh3d-label.truck{background:#fff7e6;border-color:#f0a020;font-size:10px} .wh3d-label.truck.on{background:#f0a020;color:#fff;font-size:12px} .wh3d-label.bldg.in{background:#2f6fd6;border-color:#2f6fd6} .wh3d-label.bldg.fac{background:#2e9e5b;border-color:#2e9e5b} .wh3d-label.shelf.fac{border-color:#9fd3b4} .wh3d-side li.muted{display:block;cursor:default;font-size:13px} .wh3d-side li.inwh .n{background:#d6e6fb;color:#1f4f8f;font-weight:700} .wh3d-side li.fac .n{background:#d4efdf;color:#1f7a45;font-weight:700} .wh3d-days{display:flex;gap:3px;margin:10px 0 2px} .wh3d-days span{flex:1;text-align:center;font-size:10px;font-weight:700;color:#fff;padding:3px 0;border-radius:4px;text-shadow:0 0 2px rgba(0,0,0,.35)} .wh3d-daydot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:middle} .wh3d-list.wh3d-poline{max-height:none} .wh3d-list.wh3d-poline li{display:block;padding:7px 2px;cursor:default} .wh3d-poline .pl-top{display:flex;align-items:center;gap:8px} .wh3d-poline .pl-top b{color:var(--w-ink)} .wh3d-poline .pl-date{display:inline-flex;align-items:center;color:var(--w-muted);font-size:12px} .wh3d-poline .pl-top em{margin-left:auto;font-style:normal;font-weight:700;color:var(--w-ink);white-space:nowrap} .wh3d-poline .pl-part{margin-top:3px;font-size:12px;color:var(--w-muted);line-height:1.35;overflow-wrap:anywhere} .wh3d-poline .pl-part b{color:var(--w-ink);font-weight:700;margin-right:4px} .wh3d-poline .pl-part i{font-style:italic;opacity:.75} .wh3d-list.wh3d-poline li.done{opacity:.55} .wh3d-reqs .pl-top a{color:var(--w-accent);text-decoration:none} .wh3d-reqs .pl-top em{font-weight:600;color:var(--w-muted)} .wh3d-reqs .pl-part .pl-qty{float:right;color:var(--w-ink);font-weight:700;margin-left:6px} .wh3d-reqs .pl-part.pl-done{opacity:.55} .wh3d-sup li small .wh3d-daydot{margin-right:4px} .wh3d-panel .wh3d-actions:first-of-type{margin:10px 0 4px} .wh3d-list.wh3d-sup li{grid-template-columns:minmax(0,1fr) auto;padding-right:10px} .wh3d-sup li span{display:flex;flex-direction:column;color:var(--w-ink)} .wh3d-sup li span b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wh3d-sup li small{color:var(--w-muted);font-size:11px} .wh3d-sup li em{color:var(--w-accent);font-weight:700} .wh3d-back-btn{padding:4px 10px;font-size:12px;margin-bottom:6px} .wh3d-list.wh3d-po li{grid-template-columns:auto minmax(0,1fr) auto} .wh3d-list.wh3d-po li.done{opacity:.55} .wh3d-legend li{grid-template-columns:14px 18px 1fr auto} .wh3d-legend li i{width:14px;height:14px;border-radius:4px} .wh3d-legend li small{grid-column:auto}.wh3d-legend li em{grid-row:auto;grid-column:auto} .wh3d-legend li.off{opacity:.35;text-decoration:line-through} .wh3d-panel{position:absolute;right:12px;top:12px;width:290px;max-height:calc(100% - 24px);overflow:auto;padding:16px} .wh3d-mini{margin-left:auto;white-space:nowrap;padding:3px 9px;border-radius:6px;border:1px solid var(--w-line);background:var(--w-card);color:var(--w-ink);font-size:11px;font-weight:700;letter-spacing:0;text-transform:none;cursor:pointer} .wh3d-mini:hover{border-color:var(--w-accent);color:var(--w-accent)} .wh3d-minbtn{margin-left:auto;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:none; border-radius:6px;border:1px solid var(--w-line);background:var(--w-card);color:var(--w-ink);font-size:16px;font-weight:700;line-height:1;cursor:pointer} .wh3d-minbtn:hover{border-color:var(--w-accent);color:var(--w-accent)} .wh3d-headsum{display:none;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--w-ink);font-weight:700;letter-spacing:0;text-transform:none} .wh3d-card.min{width:auto;padding:10px 12px} .wh3d-card.min > :not(.wh3d-head){display:none} .wh3d-card.min .wh3d-head{margin:0} .wh3d-card.min .wh3d-headsum{display:inline} .wh3d-minbtn + .wh3d-close{margin-left:4px} .wh3d-close{margin-left:auto;background:none;border:0;color:var(--w-muted);font-size:20px;padding:0 4px;cursor:pointer;line-height:1} .wh3d-panel h3{margin:6px 0 0;font-size:21px} .wh3d-pill{display:inline-block;margin:10px 0 4px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;color:var(--w-ink);background:color-mix(in srgb,var(--c) 22%,transparent);border:1px solid color-mix(in srgb,var(--c) 55%,transparent)} .wh3d-kv{display:grid;grid-template-columns:auto 1fr;margin:10px 0;border-top:1px solid var(--w-line)} .wh3d-kv dt,.wh3d-kv dd{margin:0;padding:7px 0;border-bottom:1px solid var(--w-line);font-size:13px} .wh3d-kv dt{color:var(--w-muted)}.wh3d-kv dd{text-align:right;overflow-wrap:anywhere;padding-left:10px} .wh3d-prog span{display:block;font-size:12px;font-weight:600;margin-bottom:6px} .wh3d-segs{display:flex;gap:3px}.wh3d-segs i{flex:1;height:5px;border-radius:3px;background:var(--w-line)} .wh3d-mix{display:flex;height:10px;border-radius:5px;overflow:hidden} .wh3d-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0} .wh3d-list{list-style:none;margin:10px 0 0;padding:0;max-height:300px;overflow:auto} .wh3d-list li{display:grid;grid-template-columns:10px auto 1fr auto;gap:8px;align-items:center;padding:6px 2px;border-bottom:1px solid var(--w-line);font-size:13px;cursor:pointer} .wh3d-list li:hover{background:rgba(31,111,209,.08)} .wh3d-list li i{width:10px;height:10px;border-radius:3px} .wh3d-list li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--w-muted)}.wh3d-list li em{font-style:normal} .wh3d-scope{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:2px;max-width:calc(100% - 560px);overflow-x:auto;background:var(--w-card);border:1px solid var(--w-line);border-radius:12px;padding:5px;box-shadow:0 2px 8px rgba(20,40,60,.1)} .wh3d-scope[hidden]{display:none} .wh3d-scope span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--w-muted);padding:0 8px 0 6px;white-space:nowrap} .wh3d-scope button{background:none;color:var(--w-ink);font-size:14px;font-weight:600;padding:6px 12px;border-radius:8px;white-space:nowrap;flex:none} .wh3d-scope button:hover{background:var(--w-bg)} .wh3d-scope button.on{background:var(--w-accent);color:#fff} .wh3d-scope button.sup{color:#4f8fe8}.wh3d-scope button.sup.on{background:#2f6fd6;color:#fff} .wh3d-scope button.fac{color:#1f7a45}.wh3d-scope button.fac.on{background:#2e9e5b;color:#fff} .wh3d-bottom{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;max-width:calc(100% - 24px)} .wh3d-hint{font-size:12px;background:var(--w-card);border:1px solid var(--w-line);border-radius:999px;padding:4px 12px;box-shadow:0 1px 3px rgba(0,0,0,.08)} .wh3d-hint button{background:none;border:1px solid var(--w-line);color:var(--w-ink);padding:0 8px;margin-left:4px;border-radius:5px;font-weight:700} .wh3d-views{display:flex;gap:2px;background:var(--w-card);border:1px solid var(--w-line);border-radius:12px;padding:5px;box-shadow:0 2px 8px rgba(20,40,60,.1);flex-wrap:wrap;justify-content:center} .wh3d-views button{background:none;color:var(--w-ink);font-size:14px;font-weight:500;padding:7px 13px;border-radius:8px} .wh3d-views button:hover{background:var(--w-bg)} .wh3d-views button.on{color:var(--w-accent);background:rgba(31,111,209,.08)} .wh3d-front{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);z-index:2;width:min(800px,calc(100% - 580px));max-height:calc(100% - 150px);overflow:auto;padding:14px} .wh3d-front[hidden]{display:none} .wh3d-front-head b{display:block;font-size:18px}.wh3d-front-head span{font-size:12px} .wh3d-front-body{margin-top:10px} .fv-rack{border-left:6px solid #2f6fd6;border-right:6px solid #2f6fd6;padding:0 4px;background:var(--w-bg)} .fv-level{display:flex;align-items:flex-end;gap:6px;border-bottom:5px solid #f08a24;padding:6px 2px 3px} .fv-level>em{font-style:normal;font-size:10px;color:var(--w-muted);min-width:12px;flex:none;white-space:nowrap} .fv-cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;flex:1} .fv-slot{height:54px;border:1px dashed var(--w-line);border-radius:4px} .fv-item{height:98px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:1px;padding:3px 5px;border-radius:4px;background:#d6ae78;color:#3b2a14;border:1px solid #b58a57;font-size:11px;font-weight:400;text-align:left;position:relative;overflow:hidden;cursor:pointer} .fv-item i{position:absolute;top:0;left:0;right:0;height:7px} .fv-item b{font-size:14px;font-weight:800;line-height:1.12;max-width:100%} .fv-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:300;opacity:.85} .fv-item em{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-size:12px;font-weight:600;color:#5a3d16} .fv-item.coil em{color:#2c3a48} .fv-item u{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-width:100%;overflow:hidden;text-decoration:none;font-size:11px;font-weight:400;line-height:1.25} .fv-item u strong{font-weight:700} .fv-item:hover{filter:brightness(1.07);outline:2px solid #1f6fd1} .fv-item.hit{outline:2px dashed #1f6fd1;outline-offset:1px} .fv-item.on{outline:3px solid #1f6fd1;box-shadow:0 0 0 5px rgba(31,111,209,.25)} .fv-item.out{opacity:.18;filter:grayscale(1)} .fv-floor{display:flex;gap:14px;overflow-x:auto;align-items:flex-end;padding:4px 2px 0;border-bottom:4px solid #9aa6b0} .fv-pallet{flex:0 0 190px;display:flex;flex-direction:column} .fv-stack{display:flex;flex-direction:column;gap:2px} .fv-stack .fv-item{height:68px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;column-gap:6px;row-gap:0;padding:2px 6px 2px 14px} .fv-stack .fv-item i{top:0;bottom:0;right:auto;width:8px;height:auto} .fv-gap{height:68px} .fv-stack .fv-item b{grid-column:1/-1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fv-stack .fv-item em{grid-column:1;grid-row:2} .fv-stack .fv-item span{grid-column:2;grid-row:2} .fv-stack .fv-item u{grid-column:1/-1;grid-row:3} .fv-item.coil{background:linear-gradient(#c3cad1,#8f99a3);border-color:#78828c;color:#1d2733;border-radius:12px} .fv-wood{height:12px;margin-top:2px;border-radius:2px;background:repeating-linear-gradient(90deg,#cf9f68 0 14px,#a9784a 14px 18px)} .fv-pallet small{text-align:center;color:var(--w-muted);font-size:10px;margin-top:3px} .wh3d-nav{position:absolute;right:12px;bottom:14px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px; background:var(--w-card);border:1px solid var(--w-line);border-radius:14px;box-shadow:0 2px 10px rgba(20,40,60,.14)} .wh3d-nav button{width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:10px;background:none;color:var(--w-ink)} .wh3d-nav button:hover{background:var(--w-bg);color:var(--w-accent)} /* the view control sits beside the warehouse switch, horizontal */ .wh3d-topbar{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:8px;align-items:stretch;max-width:calc(100% - 560px)} .wh3d-topbar .wh3d-scope{position:static;transform:none;max-width:none;min-width:0} .wh3d-topbar .wh3d-nav{position:relative;right:auto;bottom:auto;flex:none;flex-direction:row;padding:5px} .wh3d-topbar .wh3d-nav button{width:34px;height:34px} .wh3d-topbar .wh3d-nav hr{width:0;height:22px;margin:0 4px;border:0;border-left:1px solid var(--w-line)} .wh3d-topbar .wh3d-viewmenu{right:0;bottom:auto;top:calc(100% + 8px)} .wh3d-topbar .wh3d-viewmenu button{width:auto;height:auto} .wh3d-viewmenu{position:absolute;right:calc(100% + 8px);bottom:0;display:flex;flex-direction:column;gap:2px;min-width:120px;padding:6px; background:var(--w-card);border:1px solid var(--w-line);border-radius:12px;box-shadow:0 4px 14px rgba(20,40,60,.16)} .wh3d-viewmenu[hidden]{display:none} .wh3d-viewmenu b{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--w-muted);padding:4px 8px} .wh3d-viewmenu button{width:auto;height:auto;justify-content:flex-start;padding:8px 12px;font-size:14px;font-weight:600} .wh3d-nav hr{width:24px;margin:4px 0;border:0;border-top:1px solid var(--w-line)} .wh3d-tip{position:absolute;pointer-events:none;max-width:300px;background:var(--w-card);color:var(--w-ink);border:1px solid var(--w-line);border-radius:8px;padding:7px 10px;font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,.14);z-index:3} .wh3d-nogl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--w-bg)} .wh3d-nogl[hidden],.wh3d-tip[hidden],.wh3d-hint[hidden]{display:none} @media (max-width:1100px){.wh3d-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.wh3d-side{display:none}.wh3d-front{width:calc(100% - 330px);left:12px;transform:none}.wh3d-topbar{left:12px;transform:none;max-width:calc(100% - 330px)}} @media (max-width:700px){.wh3d-main{padding:6px}.wh3d{padding:8px}.wh3d-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .wh3d-searchbox{width:100%}.wh3d #wh3d-search{width:100%}.wh3d-stage{min-height:480px}.wh3d-panel{left:8px;right:8px;top:8px;width:auto;max-height:55%}.wh3d-panel.empty{display:none}.wh3d-topbar{left:8px;max-width:calc(100% - 16px);flex-wrap:wrap}.wh3d-front{left:8px;right:8px;width:auto;bottom:96px;max-height:50%}.wh3d-scope{max-width:calc(100% - 24px)} .wh3d-views{flex-wrap:nowrap;overflow-x:auto;max-width:calc(100vw - 40px);justify-content:flex-start}.wh3d-views button{padding:6px 9px;font-size:13px;flex:none} /* the 3D view takes most of a phone held upright */ .wh3d-stage{height:90vh;height:90svh;min-height:420px;flex:none} .wh3d-stage.max,.wh3d-stage:fullscreen{height:auto;min-height:0} /* Shelf Contains open: the view bars step aside so it has the room */ .wh3d-stage.fv-open .wh3d-topbar,.wh3d-stage.fv-open .wh3d-bottom{display:none} /* the same while the Selected card is open (a shelf, a supplier, a line...): minimise or close it to get the bars back */ .wh3d-stage:has(.wh3d-panel:not(.empty):not(.min)) .wh3d-topbar, .wh3d-stage:has(.wh3d-panel:not(.empty):not(.min)) .wh3d-bottom{display:none} .wh3d-stage:has(.wh3d-panel:not(.empty):not(.min)):not(.fv-open) .wh3d-panel{max-height:calc(100% - 16px)} .wh3d-stage.fv-open .wh3d-front{bottom:8px;max-height:calc(58% - 12px)} /* ...and shares the height with Selected without overlapping it: Selected on top, Shelf Contains below; a minimised or empty Selected leaves it the room */ .wh3d-stage.fv-open .wh3d-panel{max-height:calc(42% - 8px)} .wh3d-stage.fv-open:has(.wh3d-panel.min) .wh3d-front{max-height:calc(100% - 72px)} .wh3d-stage.fv-open:has(.wh3d-panel.empty) .wh3d-front{max-height:calc(100% - 16px)}} /* tag category: mass prod / trial / rest of a split */ .pill.cat-mp{background:#e3eefc;color:#1f5fae}.pill.cat-try{background:#fff1db;color:#a14b00}.pill.cat-rs{background:#ece4f7;color:#5b3a92}.pill.cat-oth{background:#eceff1;color:#455a64}.pill.cat-sply{background:#dff3ea;color:#1f7a55} .wh3d-cats li i{border-radius:50%}.wh3d-cats i.cat-mp{background:#1f5fae}.wh3d-cats i.cat-try{background:#e08a1e}.wh3d-cats i.cat-rs{background:#7b56b5}.wh3d-cats i.cat-oth{background:#78909c}.wh3d-cats i.cat-sply{background:#2e9e6b}.wh3d-cats i.cat-none{background:#cfd8dc} .wh3d-poline .pl-pr{font-size:12px;color:var(--w-muted);border:1px solid var(--w-line);border-radius:4px;padding:0 5px} .wh3d-cats li{grid-template-columns:14px 38px 1fr auto}.wh3d-cats li small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* the search row inside the 3D frame (top bar, under the warehouse / view controls) */ .wh3d-find{position:absolute;right:12px;bottom:14px;z-index:3;display:flex;gap:6px;width:min(276px,calc(100% - 24px))} /* the right column is the Selected card's, down to the search box */ .wh3d-panel{max-height:calc(100% - 140px)} /* not wide enough for the View bar and the search side by side: the search sits above the bar */ @media (max-width:1700px){.wh3d-find{bottom:68px}} .wh3d .wh3d-find .wh3d-searchbox{flex:1 1 auto;width:auto;min-width:0} .wh3d-icon-btn{font-size:18px;line-height:1;padding:6px 11px} .wh3d-find #wh3d-search{width:100%;box-shadow:0 2px 8px rgba(20,40,60,.12)} .wh3d-find .wh3d-btn{box-shadow:0 2px 8px rgba(20,40,60,.12);white-space:nowrap} /* Selected card with nothing selected: just its title, no buttons */ .wh3d-panel.empty{width:auto;padding:10px 14px}.wh3d-panel.empty .wh3d-head{margin:0}.wh3d-panel.empty .wh3d-minbtn,.wh3d-panel.empty .wh3d-close{display:none} .wh3d-bottom{width:max-content} @media (max-width:700px){.wh3d-find{left:8px;right:8px;width:auto;bottom:64px} .wh3d-stage:has(.wh3d-panel:not(.empty):not(.min)) .wh3d-find,.wh3d-stage.fv-open .wh3d-find{display:none}} .wh3d-poline .mv{font-size:11px;font-weight:700;border-radius:4px;padding:1px 6px}.mv-in{background:#dff3ea;color:#1f7a55}.mv-out{background:#fde7d9;color:#b4501a}.mv-move{background:#e3eefc;color:#1f5fae}.mv-adjust_add,.mv-adjust_remove{background:#eceff1;color:#455a64} .wh3d-poline .pl-top a{color:inherit;text-decoration:none} .sizerange{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}.sizerange .sr{display:inline-flex;align-items:center;gap:3px}.sizerange .sr b{font-size:13px}.sizerange input{width:62px;min-width:0;flex:none;padding:6px 7px} /* receiving check */ .rcv-day{display:inline-flex;gap:6px;align-items:center;margin-left:auto}.rcv-day input[type=date]{padding:6px 8px} .rcv-summary{margin:10px 0 14px;padding:14px 16px;border-radius:10px;background:var(--card);border:1px solid var(--line)} .rcv-summary.done{border-color:#2e9e6b;background:#e6f6ee;color:#1f7a55} .rcv-big{font-size:18px;margin-bottom:8px} .rcv-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--line);margin-bottom:8px} .rcv-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px}.rcv-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle} i.rcv-received{background:#2e9e6b}i.rcv-partial{background:#e0a020}i.rcv-tagged{background:#5a8dd6}i.rcv-not_received{background:#d64532} .rcv-pill{font-size:12px;font-weight:700;border-radius:5px;padding:2px 7px;white-space:nowrap} .rcv-pill.rcv-received{background:#dff3ea;color:#1f7a55}.rcv-pill.rcv-partial{background:#fff1db;color:#a14b00} .rcv-pill.rcv-tagged{background:#e3eefc;color:#1f5fae}.rcv-pill.rcv-not_received{background:#fde4e1;color:#b3261e} .rcv-meter{height:4px;background:var(--line);border-radius:2px;margin-top:3px;min-width:60px}.rcv-meter i{display:block;height:100%;background:#2e9e6b;border-radius:2px} .rcv-supplier h2{display:flex;gap:10px;align-items:baseline} .rqlines .tagstep{display:inline-flex;align-items:center;gap:6px;margin-left:6px;white-space:nowrap}.rqlines .tagstep[hidden]{display:none}.rqlines .tagstep button{padding:2px 10px;font-size:16px;line-height:1.2} .rqlines .tagsum{font-size:12px;margin-top:4px;color:var(--muted);white-space:nowrap}.rqlines .tagsum b{color:var(--ink)} .rqlines .tagsum .split,.splitbox b,.pill.split{color:#b8600b} .splitbox{border-left:4px solid #e0803a} .printq{border-left:4px solid #e0803a;display:flex;flex-wrap:wrap;gap:10px;align-items:center} /* issue many tags (from Outstanding): a wide grid of editable cells */ .tablewrap{overflow-x:auto} table.bulk td{vertical-align:middle;padding:6px 4px} table.bulk td:nth-child(2){min-width:200px} table.bulk input,table.bulk select{padding:6px;font-size:13px} table.bulk tr.off{opacity:.45} table.bulk tr.bad{outline:2px solid #c0392b} /* date boxes as DD/MM/YYYY (static/js/dates.js): a text box, a calendar button, the real date box hidden */ .dmy{position:relative;display:inline-flex;align-items:center;gap:4px} .dmy .dmy-text{width:8.6em;min-width:0} .dmy .dmy-text.bad{border-color:#c0392b;outline:1px solid #c0392b} .dmy .dmy-btn{padding:4px 7px;line-height:1;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:6px;cursor:pointer} .dmy .dmy-native{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0} .pill.asnpill{background:#e0f3ea;color:#16683f;text-decoration:none;margin-left:4px} .spbar .navmenu.open-wide{display:flex;flex:1;flex-wrap:wrap;align-items:center;gap:4px} /* Receiving: the "waiting to be tagged" basket, kept while you search */ .basketbar{position:sticky;bottom:0;z-index:20;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;padding:10px 14px; background:var(--card);border:1px solid var(--line);border-left:4px solid #1d8a5a;border-radius:10px;box-shadow:0 -4px 14px rgba(20,40,60,.12)} .basketbar[hidden]{display:none} .basketbar .bk-title{font-weight:600;margin-right:auto} .basketbar .bk-list{flex-basis:100%;list-style:none;margin:4px 0 0;padding:0;max-height:220px;overflow:auto} .basketbar .bk-list li{display:flex;gap:8px;align-items:baseline;padding:4px 0;border-top:1px solid var(--line);font-size:13px} .basketbar .bk-list li span{flex:1}.basketbar .bk-list small{color:var(--muted)} .rqlines input[readonly]{background:var(--bg);color:var(--ink)} .rcv-mark{display:inline-block;font-weight:800;margin-right:5px}.rcv-mark.rcv-received{color:#2e9e6b}.rcv-mark.rcv-partial{color:#e0a020}.rcv-mark.rcv-tagged{color:#5a8dd6} .wh3d-side li .n .rcv-mark{margin:0} .wh3d-ok{color:#1f9d6b;font-weight:700} .out-sups{display:flex;flex-wrap:wrap;gap:6px}.out-sup{border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:13px;text-decoration:none;color:var(--ink)}.out-sup b{color:#b3261e;margin-left:4px}.out-sup.on{background:var(--accent,#1f6fd1);color:#fff;border-color:transparent}.out-sup.on b{color:#fff}.out-sup.clear{color:var(--muted)} .selbar{display:flex;align-items:center;gap:10px;margin:0 0 8px}.selbar button{display:inline-flex;align-items:center;gap:6px} table.list th.chk,table.list td.chk{width:28px;text-align:center}table.list td.chk input,table.list th.chk input{width:18px;height:18px;margin:0} .filters .selbtn{display:inline-flex;align-items:center;gap:6px} table.list tr.picked td{background:rgba(31,111,209,.14)}table.list tr.picked td:first-child{box-shadow:inset 3px 0 0 #1f6fd1} /* a phone held sideways: the 3D view fits the screen height, the bars go compact -- warehouse switch + view buttons top left, Selected top right, the view bar bottom left, the search bottom right */ @media (orientation:landscape) and (max-height:540px){ .wh3d-stage{height:100vh;height:100svh;min-height:0;flex:none} .wh3d-stage.max,.wh3d-stage:fullscreen{height:auto} .wh3d-topbar{top:6px;left:6px;transform:none;max-width:calc(100% - 270px);gap:6px;flex-wrap:nowrap} .wh3d-scope{padding:3px;max-width:none}.wh3d-scope button{font-size:13px;padding:4px 9px} .wh3d-topbar .wh3d-nav{padding:3px}.wh3d-topbar .wh3d-nav button{width:30px;height:30px} .wh3d-panel{top:6px;right:6px;left:auto;width:250px;max-height:calc(100% - 60px);padding:10px 12px} .wh3d-bottom{left:6px;bottom:6px;transform:none;align-items:flex-start;max-width:calc(100% - 262px)} .wh3d-views{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;max-width:100%;padding:3px} .wh3d-views button{font-size:13px;padding:5px 9px;flex:none} .wh3d-find{left:auto;right:6px;bottom:6px;width:244px} .wh3d-front{left:6px;right:auto;transform:none;width:calc(100% - 270px);bottom:6px;max-height:calc(100% - 60px)} /* side by side there is room for the bars while Selected is open */ .wh3d-stage:has(.wh3d-panel:not(.empty):not(.min)) .wh3d-topbar, .wh3d-stage:has(.wh3d-panel:not(.empty):not(.min)) .wh3d-bottom, .wh3d-stage:has(.wh3d-panel:not(.empty):not(.min)) .wh3d-find{display:flex} .wh3d-stage:has(.wh3d-panel:not(.empty):not(.min)):not(.fv-open) .wh3d-panel{max-height:calc(100% - 60px)} /* Shelf Contains takes the bottom left: the view bar steps aside */ .wh3d-stage.fv-open .wh3d-topbar{display:flex} .wh3d-stage.fv-open .wh3d-bottom{display:none} .wh3d-stage.fv-open .wh3d-front{bottom:6px;max-height:calc(100% - 64px)} .wh3d-stage.fv-open .wh3d-panel{max-height:calc(100% - 60px)} /* short screen: the card titles (with minimise / close) stay put while the content scrolls */ .wh3d-front .wh3d-head,.wh3d-panel .wh3d-head{position:sticky;top:-14px;z-index:1;background:var(--w-card);margin-top:-14px;padding-top:14px} .wh3d-panel .wh3d-head{top:-10px;margin-top:-10px;padding-top:10px} } /* a material's page: on a phone, Movement history goes under Tag data, full width */ .tablewrap{overflow-x:auto} .item-cols .kv td:first-child{white-space:nowrap} @media (max-width:760px){.item-cols{grid-template-columns:1fr}} /* part tags: how many tags the issue makes, loud when it is a lot */ .tagcount{font-size:15px;margin:10px 0}.tagcount:empty{display:none} .tagcount.many{background:#fde4e1;color:#b3261e;padding:8px 10px;border-radius:6px} .confirmbox{border:1px solid #e0b636;padding:12px 14px}.confirmbox p{margin:0 0 8px} .voidrange{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin-top:14px}.voidrange label{display:flex;flex-direction:column;gap:4px;font-size:13px} .voidrange input[name=reason]{width:min(420px,80vw)} .filters .selbtn.danger{color:#c62828} /* scanner: Location -- what belongs on a shelf and what is on it */ .tile.loc{background:#9b2c3e} /* Pick up (CAP ERP production tags) is a form post, so its tile is a button */ .tileform{display:contents} button.tile{border:0;width:100%;font-family:inherit;cursor:pointer} .tile.pick{background:#0f7c86} .tile.os{background:#7a5a12} .osbar{border-left-color:#b8860b} .asnbar{border-left-color:#1f6fd1} .freebox,.freelink{border-left:4px solid #1d8a5a} .carrylink{display:block;text-decoration:none;font-weight:700;font-size:17px;color:var(--ink);border-left:4px solid #0f7c86} .carry{list-style:none;margin:0;padding:0} .carry li{padding:10px 0;border-bottom:1px solid var(--line)} .carry li b{font-size:17px} .carry .where{display:block;font-size:18px;font-weight:700;color:#0f7c86;margin-top:2px} .carry .where.none{color:#c0392b} .carry li.stale .since{color:#c0392b;font-weight:700} .pill.kind-store{background:#e6f2f3;color:#0f5f66} .loc-actions{display:flex;gap:8px;margin-top:12px}.loc-actions form{flex:1}.loc-actions button{width:100%;padding:12px 8px} .loc-parts{list-style:none;margin:0;padding:0} .loc-parts li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0 9px 10px;border-top:1px solid var(--line);border-left:3px solid transparent} .loc-parts li:first-child{border-top:0} .loc-parts li.ok{border-left-color:#37b37e}.loc-parts li.here{border-left-color:#5c9ae6}.loc-parts li.empty{border-left-color:#b0bcc6}.loc-parts li.stray{border-left-color:#f0a020} .loc-parts .num{text-align:right;white-space:nowrap}.loc-parts .warn{color:#a86b00} /* sign-in through CAP ERP */ .login .sso-btn,.mcard .sso-btn{display:block;text-align:center;margin:14px 0 8px;text-decoration:none} /* Material -> part: rows from the CAP ERP BoM */ .pill.erp{background:#e3eefc;color:#1f5fae} .erpsync .inline-actions{display:flex;gap:8px;flex-wrap:wrap} /* the Scanner pages opened on a PC (a barcode scanner plugged into it, the menu's Scanner link): a phone-width column in the middle of the screen */ .topbar .navlink.scanlink{border:1px solid var(--line);color:var(--accent);white-space:nowrap} .topbar .navlink.scanlink:hover{border-color:var(--accent);color:var(--accent)} .mdesk{display:none;font-size:13px;text-decoration:none;color:var(--accent);border:1px solid var(--line);border-radius:7px;padding:3px 9px} @media (min-width:900px){ body.mobile .mwrap{max-width:640px;margin:0 auto} body.mobile .mbar{padding-left:max(14px,calc(50% - 306px));padding-right:max(14px,calc(50% - 306px))} body.mobile .footbar{left:max(0px,calc(50% - 320px));right:max(0px,calc(50% - 320px))} body.mobile .toast{left:max(14px,calc(50% - 306px));right:max(14px,calc(50% - 306px))} .mdesk{display:inline-block} } /* requisition Item box (Select2), in the app's look */ .rqlines td.itemcell{min-width:280px} .select2-container--default .select2-selection--single{height:40px;border:1px solid var(--line);border-radius:7px;background:var(--field)} .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:38px;padding-left:10px;padding-right:44px;color:var(--ink)} .select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--muted)} .select2-container--default .select2-selection--single .select2-selection__arrow{height:38px;right:4px} .select2-container--default .select2-selection--single .select2-selection__clear{height:38px;margin-right:22px;font-size:18px;color:var(--muted)} .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single{border-color:var(--accent)} .select2-dropdown{border-color:var(--line);border-radius:8px;box-shadow:0 10px 28px rgba(20,40,60,.18);overflow:hidden} .select2-search--dropdown .select2-search__field{padding:8px 10px;border:1px solid var(--line);border-radius:6px;font:inherit} .select2-results__option{padding:7px 10px} .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background:var(--accent);color:#fff} .select2-container--default .select2-results>.select2-results__options{max-height:320px} .s2opt b{display:block;font-weight:700} .s2opt small{display:block;font-size:12px;color:var(--muted)} .select2-results__option--highlighted .s2opt small{color:#e6efff} /* Select2 boxes take the theme's colours (its own CSS is white) */ .select2-dropdown{background:var(--card);color:var(--ink)} .select2-container--default .select2-search--dropdown .select2-search__field{background:var(--field);color:var(--ink)} .select2-container--default .select2-results__option--selected{background:var(--line)} /* requisitions: two kinds, Material and Sub Part */ .rq-new{margin-left:auto;display:inline-flex;gap:8px;flex-wrap:wrap} .layout-head .rq-new .btn{font-size:14px;padding:7px 12px} .pill.kind-sub{background:#ece4f7;color:#5b3a92} .pill.kind-mat{background:#e3eefc;color:#1f5fae} .pill.kind-wipfg{background:#e0f3ea;color:#16683f} /* a tick box inside a filter bar keeps its own size */ .filters .check{margin:0;white-space:nowrap}.filters .check input{flex:none;min-width:0;width:auto} /* Scanner pages: read at arm's length on the floor -- everything a size up */ body.mobile{font-size:17px} body.mobile .small{font-size:15px} body.mobile .step{font-size:17px;color:var(--ink)} body.mobile input,body.mobile select{font-size:19px;padding:13px 12px} body.mobile .mtitle{font-size:20px} body.mobile .muser{font-size:14px} body.mobile .mbar .back{font-size:32px} body.mobile .err,body.mobile .okmsg,body.mobile .warnmsg{font-size:16px} body.mobile .pill{font-size:13px;padding:3px 9px} body.mobile .rq-head b{font-size:19px} body.mobile .rq-lines li{font-size:16px} body.mobile .td-run{font-size:24px} body.mobile .lines .ln-tag{font-size:17px} body.mobile .lines .ln-sub{font-size:15px} body.mobile .lines .ln-res{font-size:13px} body.mobile .lines .ln-qty small,body.mobile .tc-qty small,body.mobile .counter small,body.mobile .totals div{font-size:12px} body.mobile .tagcard .tc-part{font-size:18px} body.mobile .tagcard .tc-sub{font-size:15px} body.mobile .tagcard .tc-meta{font-size:14px} body.mobile table.mkv td{font-size:16px} body.mobile .loc-parts li{font-size:17px} body.mobile .warnbox ul,body.mobile .bad ul,body.mobile .mcard.movebox ul{font-size:15px} body.mobile .check{font-size:16px} body.mobile .toast{font-size:16px} body.mobile .loc-actions button{font-size:16px} /* the scan counter: scanned / tags the requisition takes */ .counter .cnum{display:flex;align-items:baseline;justify-content:flex-end;gap:6px} .counter .cnum em{font-style:normal;font-size:22px;font-weight:700;color:var(--muted)} /* a part line's material (Size [Spec]) under the part */ .rq-mat{display:block;font-size:15px;font-weight:600;color:var(--ink);opacity:.8;margin-top:1px} /* Scan Out: how many tags on each shelf, as plain to read as the shelf */ body.mobile .rq-where span small{font-size:16px;font-weight:700;color:var(--ink)} /* Scan Out: a requisition line ticked once its tags are scanned, highlighted while some are */ .rq-lines li.got{background:rgba(31,157,107,.14);border-radius:8px;padding-left:8px;padding-right:8px;box-shadow:inset 4px 0 0 #1f9d6b} .rq-lines li.got b.st{color:#1f9d6b} .rq-where[hidden]{display:none} /* the scan box sits on top of the scan page, under the bar, while the page scrolls */ .manualrow.scantop{position:sticky;top:var(--mbar-h,56px);z-index:4;background:var(--bg);margin:0 -14px 12px;padding:8px 14px;box-shadow:0 6px 8px -6px rgba(20,40,60,.18)} .rq-lines li.part{background:rgba(230,193,78,.16);border-radius:8px;padding-left:8px;padding-right:8px;box-shadow:inset 4px 0 0 #d9a520} .rq-lines li.part b.st{color:#a86b00} /* Scan Out without a requisition: as plain to see as the requisition buttons, in Scan Out's colour */ button.big.outbtn{background:#c2601c;color:#fff;border:0;font-weight:700} button.big.outbtn:hover{filter:brightness(1.08)} /* ---- Dark: the desktop follows the device (System > Appearance); the scanner is light unless picked by hand (html[data-theme]) ---- */ @media (prefers-color-scheme: dark){ html:not([data-theme]){--bg:#0f1720;--ink:#eef3f7;--muted:#8fa1b0;--line:#2b3b4c;--card:#1b2836;--field:#0f1720; --in:#37b37e;--out:#e0803a;--warn:#e6c14e;--bad:#e2564c;--accent:#3585c4;color-scheme:dark} :where(html:not([data-theme])) .err{background:rgba(226,86,76,.15);color:#f2a29b} :where(html:not([data-theme])) .topbar{background:#16222e;color:#fff;box-shadow:none} :where(html:not([data-theme])) .topbar a{color:#cfd8e0} :where(html:not([data-theme])) .topbar a:hover{color:#fff} :where(html:not([data-theme])) .topbar .brand,:where(html:not([data-theme])) .topbar .sysname,:where(html:not([data-theme])) .topbar .sysname:hover{color:#fff} :where(html:not([data-theme])) .topbar .who{color:#8fa1b0} :where(html:not([data-theme])) .topbar .navlink:hover{background:rgba(255,255,255,.07)} :where(html:not([data-theme])) .topbar .navlink.active{color:#fff;background:rgba(53,133,196,.28)} :where(html:not([data-theme])) .topbar .navlink.scanlink,:where(html:not([data-theme])) .topbar .navlink.scanlink:hover{color:#7fb2f0} :where(html:not([data-theme])) .navtoggle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff} :where(html:not([data-theme])) .navtoggle[aria-expanded="true"]{background:rgba(53,133,196,.35);color:#fff} :where(html:not([data-theme])) .navmenu{background:#16222e;box-shadow:0 12px 24px rgba(0,0,0,.35)} :where(html:not([data-theme])) .card,:where(html:not([data-theme])) .mcard{box-shadow:none} :where(html:not([data-theme])) .pill{background:#243447;color:var(--muted)} :where(html:not([data-theme])) .pill.in_stock,:where(html:not([data-theme])) .pill.in,:where(html:not([data-theme])) .pill.ok,:where(html:not([data-theme])) .pill.new_tag,:where(html:not([data-theme])) .pill.tag-received,:where(html:not([data-theme])) .pill.rq-issued,:where(html:not([data-theme])) .pill.role-store_keeper{background:rgba(55,179,126,.18);color:#4fd39a} :where(html:not([data-theme])) .pill.issued,:where(html:not([data-theme])) .pill.out,:where(html:not([data-theme])) .pill.rq-pending{background:rgba(224,128,58,.18);color:#f0a45f} :where(html:not([data-theme])) .pill.missing,:where(html:not([data-theme])) .pill.invalid,:where(html:not([data-theme])) .pill.not_in_stock{background:rgba(226,86,76,.2);color:#f0857b} :where(html:not([data-theme])) .pill.rq-cancelled,:where(html:not([data-theme])) .pill.role-admin{background:rgba(226,86,76,.15);color:#f0857b} :where(html:not([data-theme])) .pill.moved,:where(html:not([data-theme])) .pill.unexpected,:where(html:not([data-theme])) .pill.duplicate,:where(html:not([data-theme])) .pill.already_in_stock,:where(html:not([data-theme])) .pill.adjust_add,:where(html:not([data-theme])) .pill.adjust_remove,:where(html:not([data-theme])) .pill.tag-partial,:where(html:not([data-theme])) .pill.role-supervisor{background:rgba(230,193,78,.18);color:#e6c14e} :where(html:not([data-theme])) .pill.move,:where(html:not([data-theme])) .pill.tag-tagged,:where(html:not([data-theme])) .pill.role-planner,:where(html:not([data-theme])) .pill.erp,:where(html:not([data-theme])) .pill.kind-mat{background:rgba(92,154,230,.2);color:#7fb2f0} :where(html:not([data-theme])) .pill.rq-draft{background:rgba(143,161,176,.2);color:#c3cfd9} :where(html:not([data-theme])) .pill.grp-8{background:rgba(92,154,230,.2);color:#8fbcf2} :where(html:not([data-theme])) .pill.grp-7,:where(html:not([data-theme])) .pill.kind-sub{background:rgba(155,120,220,.22);color:#c2a8f0} :where(html:not([data-theme])) .shelf-row .qr-mini{border-color:transparent} :where(html:not([data-theme])) .mbar{background:#16222e;border-bottom-color:transparent} :where(html:not([data-theme])) .mcard{background:#1b2836;border-color:transparent} :where(html:not([data-theme])) .tile{background:#243447} :where(html:not([data-theme])) .tile.in{background:#12603f} :where(html:not([data-theme])) .tile.out{background:#8a4310} :where(html:not([data-theme])) .tile.chk{background:#1b4f7a} :where(html:not([data-theme])) .tile.hist{background:#4a3b6b} :where(html:not([data-theme])) .tile.loc{background:#7a2433} :where(html:not([data-theme])) .tile.pick{background:#0b5960} :where(html:not([data-theme])) .tile.os{background:#5c430c} :where(html:not([data-theme])) .pill.kind-wipfg{background:rgba(60,180,120,.2);color:#6fd29e} :where(html:not([data-theme])) .lines li,:where(html:not([data-theme])) .tagcard{background:#1b2836;border-color:transparent;border-left-color:#35506b} :where(html:not([data-theme])) .tagcard:active{background:#22344a} :where(html:not([data-theme])) .lines .ln-sub,:where(html:not([data-theme])) .tagcard .tc-sub,:where(html:not([data-theme])) .warnbox ul,:where(html:not([data-theme])) .bad ul{color:#c3d0da} :where(html:not([data-theme])) .footbar{background:#16222e;border-top-color:transparent;box-shadow:none} :where(html:not([data-theme])) .warnbox{border-color:#6d5a1e} :where(html:not([data-theme])) .bad{border-color:#7a2a24} :where(html:not([data-theme])) .resume{border-color:#3b5470} :where(html:not([data-theme])) .late,:where(html:not([data-theme])) .ghost.danger,:where(html:not([data-theme])) .iconbtn.danger,:where(html:not([data-theme])) .filters .selbtn.danger{color:#f0857b} :where(html:not([data-theme])) .ghost.danger{border-color:rgba(226,86,76,.5)} :where(html:not([data-theme])) .modal{background:rgba(5,10,15,.6)} :where(html:not([data-theme])) .modal-card{box-shadow:0 20px 50px rgba(0,0,0,.45)} :where(html:not([data-theme])) .drp-pop,:where(html:not([data-theme])) .select2-dropdown{box-shadow:0 10px 28px rgba(0,0,0,.45)} :where(html:not([data-theme])) .okmsg{background:rgba(55,179,126,.15);color:#7fe0b4} :where(html:not([data-theme])) .warnmsg{background:rgba(230,193,78,.14);color:#f0d77a} :where(html:not([data-theme])) .dot{border-color:rgba(255,255,255,.35)} :where(html:not([data-theme])) .tagcount.many{background:rgba(229,57,53,.14);color:#ff8a80} :where(html:not([data-theme])) .confirmbox{border-color:rgba(240,215,122,.45)} :where(html:not([data-theme])) .loc-parts li.empty{border-left-color:#5b6b7b} :where(html:not([data-theme])) .loc-parts .warn{color:#f5c26b} :where(html:not([data-theme])) .rq-lines li.got b.st{color:#4fd39a} :where(html:not([data-theme])) .rq-lines li.part b.st{color:#f5c26b} :where(html:not([data-theme])) .select2-results__option--highlighted .s2opt small{color:#d6e6fb} } /* the scanner: light unless its user picks dark (the ☾ / ☀ button) */ html[data-theme="light"]{color-scheme:light} html[data-theme="dark"]{--bg:#0f1720;--ink:#eef3f7;--muted:#8fa1b0;--line:#2b3b4c;--card:#1b2836;--field:#0f1720; --in:#37b37e;--out:#e0803a;--warn:#e6c14e;--bad:#e2564c;--accent:#3585c4;color-scheme:dark} :where(html[data-theme="dark"]) .err{background:rgba(226,86,76,.15);color:#f2a29b} :where(html[data-theme="dark"]) .topbar{background:#16222e;color:#fff;box-shadow:none} :where(html[data-theme="dark"]) .topbar a{color:#cfd8e0} :where(html[data-theme="dark"]) .topbar a:hover{color:#fff} :where(html[data-theme="dark"]) .topbar .brand,:where(html[data-theme="dark"]) .topbar .sysname,:where(html[data-theme="dark"]) .topbar .sysname:hover{color:#fff} :where(html[data-theme="dark"]) .topbar .who{color:#8fa1b0} :where(html[data-theme="dark"]) .topbar .navlink:hover{background:rgba(255,255,255,.07)} :where(html[data-theme="dark"]) .topbar .navlink.active{color:#fff;background:rgba(53,133,196,.28)} :where(html[data-theme="dark"]) .topbar .navlink.scanlink,:where(html[data-theme="dark"]) .topbar .navlink.scanlink:hover{color:#7fb2f0} :where(html[data-theme="dark"]) .navtoggle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff} :where(html[data-theme="dark"]) .navtoggle[aria-expanded="true"]{background:rgba(53,133,196,.35);color:#fff} :where(html[data-theme="dark"]) .navmenu{background:#16222e;box-shadow:0 12px 24px rgba(0,0,0,.35)} :where(html[data-theme="dark"]) .card,:where(html[data-theme="dark"]) .mcard{box-shadow:none} :where(html[data-theme="dark"]) .pill{background:#243447;color:var(--muted)} :where(html[data-theme="dark"]) .pill.in_stock,:where(html[data-theme="dark"]) .pill.in,:where(html[data-theme="dark"]) .pill.ok,:where(html[data-theme="dark"]) .pill.new_tag,:where(html[data-theme="dark"]) .pill.tag-received,:where(html[data-theme="dark"]) .pill.rq-issued,:where(html[data-theme="dark"]) .pill.role-store_keeper{background:rgba(55,179,126,.18);color:#4fd39a} :where(html[data-theme="dark"]) .pill.issued,:where(html[data-theme="dark"]) .pill.out,:where(html[data-theme="dark"]) .pill.rq-pending{background:rgba(224,128,58,.18);color:#f0a45f} :where(html[data-theme="dark"]) .pill.missing,:where(html[data-theme="dark"]) .pill.invalid,:where(html[data-theme="dark"]) .pill.not_in_stock{background:rgba(226,86,76,.2);color:#f0857b} :where(html[data-theme="dark"]) .pill.rq-cancelled,:where(html[data-theme="dark"]) .pill.role-admin{background:rgba(226,86,76,.15);color:#f0857b} :where(html[data-theme="dark"]) .pill.moved,:where(html[data-theme="dark"]) .pill.unexpected,:where(html[data-theme="dark"]) .pill.duplicate,:where(html[data-theme="dark"]) .pill.already_in_stock,:where(html[data-theme="dark"]) .pill.adjust_add,:where(html[data-theme="dark"]) .pill.adjust_remove,:where(html[data-theme="dark"]) .pill.tag-partial,:where(html[data-theme="dark"]) .pill.role-supervisor{background:rgba(230,193,78,.18);color:#e6c14e} :where(html[data-theme="dark"]) .pill.move,:where(html[data-theme="dark"]) .pill.tag-tagged,:where(html[data-theme="dark"]) .pill.role-planner,:where(html[data-theme="dark"]) .pill.erp,:where(html[data-theme="dark"]) .pill.kind-mat{background:rgba(92,154,230,.2);color:#7fb2f0} :where(html[data-theme="dark"]) .pill.rq-draft{background:rgba(143,161,176,.2);color:#c3cfd9} :where(html[data-theme="dark"]) .pill.grp-8{background:rgba(92,154,230,.2);color:#8fbcf2} :where(html[data-theme="dark"]) .pill.grp-7,:where(html[data-theme="dark"]) .pill.kind-sub{background:rgba(155,120,220,.22);color:#c2a8f0} :where(html[data-theme="dark"]) .shelf-row .qr-mini{border-color:transparent} :where(html[data-theme="dark"]) .mbar{background:#16222e;border-bottom-color:transparent} :where(html[data-theme="dark"]) .mcard{background:#1b2836;border-color:transparent} :where(html[data-theme="dark"]) .tile{background:#243447} :where(html[data-theme="dark"]) .tile.in{background:#12603f} :where(html[data-theme="dark"]) .tile.out{background:#8a4310} :where(html[data-theme="dark"]) .tile.chk{background:#1b4f7a} :where(html[data-theme="dark"]) .tile.hist{background:#4a3b6b} :where(html[data-theme="dark"]) .tile.loc{background:#7a2433} :where(html[data-theme="dark"]) .tile.pick{background:#0b5960} :where(html[data-theme="dark"]) .tile.os{background:#5c430c} :where(html[data-theme="dark"]) .pill.kind-wipfg{background:rgba(60,180,120,.2);color:#6fd29e} :where(html[data-theme="dark"]) .carry .where{color:#5cc6cf} :where(html[data-theme="dark"]) .lines li,:where(html[data-theme="dark"]) .tagcard{background:#1b2836;border-color:transparent;border-left-color:#35506b} :where(html[data-theme="dark"]) .tagcard:active{background:#22344a} :where(html[data-theme="dark"]) .lines .ln-sub,:where(html[data-theme="dark"]) .tagcard .tc-sub,:where(html[data-theme="dark"]) .warnbox ul,:where(html[data-theme="dark"]) .bad ul{color:#c3d0da} :where(html[data-theme="dark"]) .footbar{background:#16222e;border-top-color:transparent;box-shadow:none} :where(html[data-theme="dark"]) .warnbox{border-color:#6d5a1e} :where(html[data-theme="dark"]) .bad{border-color:#7a2a24} :where(html[data-theme="dark"]) .resume{border-color:#3b5470} :where(html[data-theme="dark"]) .late,:where(html[data-theme="dark"]) .ghost.danger,:where(html[data-theme="dark"]) .iconbtn.danger,:where(html[data-theme="dark"]) .filters .selbtn.danger{color:#f0857b} :where(html[data-theme="dark"]) .ghost.danger{border-color:rgba(226,86,76,.5)} :where(html[data-theme="dark"]) .modal{background:rgba(5,10,15,.6)} :where(html[data-theme="dark"]) .modal-card{box-shadow:0 20px 50px rgba(0,0,0,.45)} :where(html[data-theme="dark"]) .drp-pop,:where(html[data-theme="dark"]) .select2-dropdown{box-shadow:0 10px 28px rgba(0,0,0,.45)} :where(html[data-theme="dark"]) .okmsg{background:rgba(55,179,126,.15);color:#7fe0b4} :where(html[data-theme="dark"]) .warnmsg{background:rgba(230,193,78,.14);color:#f0d77a} :where(html[data-theme="dark"]) .dot{border-color:rgba(255,255,255,.35)} :where(html[data-theme="dark"]) .tagcount.many{background:rgba(229,57,53,.14);color:#ff8a80} :where(html[data-theme="dark"]) .confirmbox{border-color:rgba(240,215,122,.45)} :where(html[data-theme="dark"]) .loc-parts li.empty{border-left-color:#5b6b7b} :where(html[data-theme="dark"]) .loc-parts .warn{color:#f5c26b} :where(html[data-theme="dark"]) .rq-lines li.got b.st{color:#4fd39a} :where(html[data-theme="dark"]) .rq-lines li.part b.st{color:#f5c26b} :where(html[data-theme="dark"]) .select2-results__option--highlighted .s2opt small{color:#d6e6fb} /* Scan Out picker: a requisition summed up -- items left and their total */ .rq-sum{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin:10px 0 12px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .rq-sum b{font-variant-numeric:tabular-nums} /* the scanner's ⚙ Settings, top right: theme, desktop, sign out */ .msettings{position:relative;flex:none;margin-left:2px} .mgear{width:48px;height:48px;padding:0;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:32px;line-height:1;cursor:pointer} .mgear[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)} .mmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:220px;display:flex;flex-direction:column;gap:8px;padding:12px; background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 28px rgba(20,40,60,.22)} .mmenu[hidden]{display:none} .mmenu b{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} .mmenu .mseg{display:flex;gap:0} .mmenu .mseg button{flex:1;padding:10px 8px;font-size:16px;font-weight:600;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:0} .mmenu .mseg button:first-child{border-radius:8px 0 0 8px}.mmenu .mseg button:last-child{border-radius:0 8px 8px 0;border-left:0} .mmenu .mseg button.on{background:var(--accent);border-color:var(--accent);color:#fff} .mmenu a{display:flex;align-items:center;gap:10px;padding:10px 4px;font-size:16px;text-decoration:none;color:var(--accent);border-top:1px solid var(--line)} .mmenu a svg{flex:none} /* language: just the flags, side by side (the name on long-press / hover) */ .mmenu .mlangs{display:flex;gap:8px} .mmenu .mlangs button{flex:1;display:flex;align-items:center;justify-content:center;padding:9px 0;background:transparent;border:1px solid var(--line);border-radius:8px} .mmenu .mlangs button.on{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)} .mmenu .flag{width:36px;height:24px;flex:none;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.15)} /* Burmese: a font that has the script, and room for its tall marks */ html[lang="my"] body{font-family:"Noto Sans Myanmar","Myanmar Sangam MN","Myanmar Text","Padauk",system-ui,sans-serif;line-height:1.6}