#view-order-tracking{--ot-ink:#172d32;--ot-muted:#63797b;--ot-line:#dfe9e7;--ot-paper:#fff;--ot-bg:#f6faf9;--ot-teal:#167d74;--ot-teal-dark:#105e59;--ot-blue:#3776c7;--ot-amber:#b97412;--ot-green:#278363;--ot-purple:#7561ba;color:var(--ot-ink);font-family:inherit} #view-order-tracking *{box-sizing:border-box} #view-order-tracking [hidden]{display:none!important} #view-order-tracking button,#view-order-tracking input,#view-order-tracking select,#view-order-tracking textarea{font:inherit} #view-order-tracking button{touch-action:manipulation} #view-order-tracking button:focus-visible,#view-order-tracking input:focus-visible,#view-order-tracking select:focus-visible,#view-order-tracking textarea:focus-visible{outline:3px solid #8bd0c8;outline-offset:2px} .ot-shell{max-width:1560px;margin:0 auto;padding:clamp(12px,2vw,28px);font-size:14px;line-height:1.5} .ot-header{display:flex;align-items:flex-start;gap:20px;justify-content:space-between;margin-bottom:19px}.ot-header h2{font-size:clamp(25px,3vw,34px);letter-spacing:-.035em;margin:3px 0 4px;color:#163d3d}.ot-header p{margin:0;color:var(--ot-muted)}.ot-eyebrow{display:block;color:var(--ot-teal);font-size:10px;font-weight:900;letter-spacing:.11em}.ot-button{display:inline-flex;justify-content:center;align-items:center;gap:7px;min-height:38px;border:1px solid #d6e1df;border-radius:10px;padding:8px 13px;background:white;color:#345052;font-weight:750;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease}.ot-button:hover:not(:disabled){transform:translateY(-1px);border-color:#88b9b1;background:#f5fbfa}.ot-button:disabled{opacity:.48;cursor:not-allowed}.ot-refresh{flex:none}.ot-refresh span{font-size:19px;line-height:1;color:var(--ot-teal)}.ot-button-primary{background:var(--ot-teal);color:#fff;border-color:var(--ot-teal)}.ot-button-primary:hover:not(:disabled){background:var(--ot-teal-dark);border-color:var(--ot-teal-dark);color:white}.ot-button-waiting{background:#fff8e9;border-color:#f0d394;color:#85580d}.ot-button-closed{background:#ecf7f0;border-color:#b9dfc9;color:#236a47}.ot-button-small{min-height:31px;padding:5px 9px;font-size:12px} .ot-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:19px}.ot-kpi{min-height:94px;display:flex;gap:12px;align-items:center;padding:15px;border:1px solid #e2ebea;border-radius:14px;background:white;box-shadow:0 3px 10px #183e3807}.ot-kpi-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:12px;background:#eef5ff;color:var(--ot-blue);font-size:21px;flex:none}.ot-kpi div{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:9px}.ot-kpi small{color:var(--ot-muted);font-size:11px;font-weight:750}.ot-kpi strong{grid-column:2;grid-row:1/3;font-size:26px;line-height:1;color:var(--ot-ink)}.ot-kpi div>span{grid-column:1/-1;font-size:10px;color:#8a9a99;margin-top:4px}.ot-kpi-amber .ot-kpi-icon{background:#fff4dc;color:var(--ot-amber)}.ot-kpi-green .ot-kpi-icon{background:#eaf7ee;color:var(--ot-green)}.ot-kpi-purple .ot-kpi-icon{background:#f1edfb;color:var(--ot-purple)} .ot-tabs{display:flex;gap:4px;padding:4px;margin-bottom:14px;border:1px solid #e0e9e7;background:#edf4f2;border-radius:12px;width:max-content;max-width:100%}.ot-tabs button,.ot-receipt-filters button{border:0;background:transparent;color:#657a79;min-height:36px;padding:7px 13px;border-radius:9px;font-weight:750;cursor:pointer}.ot-tabs button.is-active,.ot-receipt-filters button.is-active{background:#fff;color:#126b64;box-shadow:0 2px 7px #153f3b12}.ot-receipt-filters button[data-receipt-filter="awaiting-confirmation"]{color:#79540a;background:#fff8e5}.ot-receipt-filters button[data-receipt-filter="awaiting-confirmation"].is-active{background:#8b6815;color:#fff}.ot-receipt-filters button[data-receipt-filter="awaiting-confirmation"] b{background:#f1e2b8;color:#714d05}.ot-tabs b,.ot-receipt-filters b{margin-left:4px;padding:1px 6px;background:#e6f4f1;border-radius:20px;color:#11776d;font-size:11px} .ot-workbench{display:grid;grid-template-columns:minmax(280px,355px) minmax(0,1fr);gap:13px;align-items:stretch;min-height:530px}.ot-list-panel,.ot-detail{border:1px solid var(--ot-line);border-radius:15px;background:white;box-shadow:0 4px 15px #153e3907}.ot-list-panel{min-height:530px;display:flex;flex-direction:column;overflow:hidden}.ot-list-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 16px 12px}.ot-list-heading strong{display:block;font-size:14px;color:#203d3d}.ot-list-heading small{display:block;margin-top:3px;color:#849493;font-size:11px}.ot-receipt-filters{display:flex;flex-wrap:wrap;gap:5px;padding:0 12px 10px}.ot-receipt-filters button{font-size:12px;min-height:34px;padding:6px 9px}.ot-search{display:flex;align-items:center;gap:8px;height:39px;margin:0 12px 9px;padding:0 11px;background:#f6f9f8;border:1px solid #e6edeb;border-radius:9px;color:#8fa09e}.ot-search>span{font-size:19px}.ot-search input{width:100%;min-width:0;border:0!important;outline:none!important;background:transparent;color:#263b3c;font-size:12px}.ot-search input::placeholder{color:#9baaa8}.ot-search:focus-within{border-color:#69b7ad;background:#fff}.ot-receipt-list,.ot-order-list{overflow:auto;padding:0 8px 9px;overscroll-behavior:contain;scrollbar-width:thin}.ot-receipt-card{width:100%;display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 9px;border:1px solid transparent;border-bottom-color:#eff3f2;border-radius:11px;background:white;text-align:left;color:inherit;cursor:pointer}.ot-receipt-card:hover{background:#f7fbfa}.ot-receipt-card.is-selected{background:#eef8f6;border-color:#b7dcd5}.ot-receipt-thumb{width:54px;height:58px;display:grid;place-items:center;overflow:hidden;border-radius:9px;background:#eef2f1;color:#91a19e;font-size:20px}.ot-receipt-thumb img,.ot-round-thumb img{width:100%;height:100%;object-fit:cover}.ot-receipt-copy{min-width:0;display:grid;gap:3px}.ot-receipt-copy strong{display:block;color:#203c3d;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ot-receipt-copy strong small{margin-left:3px;color:#42817a;font-size:10px;font-weight:800}.ot-receipt-copy span,.ot-receipt-copy>small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#718582;font-size:10px}.ot-receipt-copy>small{font-size:9px;color:#95a3a1}.ot-receipt-qty{text-align:right;color:#14786d}.ot-receipt-qty strong{display:block;font-size:19px;line-height:1.1}.ot-receipt-qty small{color:#7e918e;font-size:9px}.ot-empty-list{display:flex;flex:1;min-height:245px;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;color:#859795}.ot-empty-list>div{width:45px;height:45px;display:grid;place-items:center;border-radius:50%;background:#eff7f5;color:#458c82;font-size:21px;margin-bottom:10px}.ot-empty-list strong{color:#42605e;font-size:13px}.ot-empty-list span{max-width:240px;margin-top:5px;font-size:11px;line-height:1.65}.ot-detail-panel{min-width:0}.ot-detail{min-height:530px;padding:clamp(15px,2vw,23px);overflow:hidden}.ot-empty-detail{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#7e908e}.ot-empty-art{width:60px;height:60px;display:grid;place-items:center;border-radius:18px;background:#edf7f5;color:#398d82;font-size:28px}.ot-empty-detail h3{margin:13px 0 5px;color:#2b4747;font-size:18px}.ot-empty-detail>p{max-width:440px;margin:0;line-height:1.7;font-size:12px}.ot-empty-steps{display:flex;gap:10px;margin-top:18px}.ot-empty-steps span{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:9px;background:#f3f7f6;color:#5c7774;font-size:10px}.ot-empty-steps b{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#d8efea;color:#14786d} .ot-detail-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:15px;border-bottom:1px solid #ebf0ef}.ot-detail-heading h3{margin:3px 0 2px;color:#203e3f;font-size:19px;line-height:1.35}.ot-detail-heading h3 small{margin-left:4px;color:#3d857d;font-size:12px}.ot-detail-heading p{margin:0;color:#879693;font-size:11px}.ot-pill{white-space:nowrap;padding:5px 9px;border-radius:99px;font-size:10px;font-weight:800}.ot-pill-blue{background:#eff5ff;color:#4c73ae}.ot-alert{display:flex;align-items:center;gap:8px;margin-top:12px;padding:11px 12px;border-radius:10px;font-size:11px}.ot-alert strong{display:block}.ot-alert span{color:inherit;opacity:.85;flex:1}.ot-alert-warning{flex-wrap:wrap;background:#fff7e8;border:1px solid #f4dda9;color:#805512}.ot-alert-muted{background:#f4f7f6;border:1px solid #e7edeb;color:#6a7e7b}.ot-prelink-choice{display:flex;align-items:flex-start;gap:10px;margin:12px 0;padding:13px 15px;border:2px solid #ddbd68;border-radius:11px;background:#fff8e5;color:#704d0d}.ot-prelink-icon{flex:none;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#f1dfaa;color:#72520b;font-weight:900}.ot-prelink-choice strong{display:block;color:#624500;font-size:14px}.ot-prelink-choice small{display:block;margin-top:4px;color:#78632a;font-size:12px;line-height:1.6}.ot-prelink-zero-quantity{margin-top:9px;padding:9px 10px;border:1px solid #e8d59e;border-radius:8px;background:#fff8e7;color:#745812;font-size:12px;font-weight:750}.ot-compare{display:grid;grid-template-columns:minmax(190px,.8fr) minmax(0,1.2fr);gap:15px;padding:17px 0 14px}.ot-compare figure,.ot-order-large-preview{margin:0;min-width:0}.ot-compare figure>img{width:100%;height:175px;display:block;object-fit:contain;background:#f4f7f6;border:1px solid #edf1ef;border-radius:11px}.ot-compare figcaption,.ot-order-large-preview figcaption{padding-top:5px;color:#94a19f;text-align:center;font-size:9px}.ot-image-placeholder{min-height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px dashed #d8e4e1;border-radius:11px;background:#f7faf9;color:#9baaa7}.ot-image-placeholder span{font-size:26px}.ot-image-placeholder small{font-size:10px}.ot-receipt-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:center;gap:8px}.ot-receipt-facts>div{min-width:0;padding:10px;border:1px solid #edf2f1;border-radius:9px;background:#fafcfb}.ot-receipt-facts small{display:block;color:#8b9a98;font-size:9px}.ot-receipt-facts strong{display:block;overflow:hidden;margin-top:3px;text-overflow:ellipsis;white-space:nowrap;color:#334e4e;font-size:12px}.ot-receipt-facts>div:first-child{grid-column:span 3;background:#f0f8f6;border-color:#dcefeb}.ot-receipt-facts>div:first-child strong{color:#10766c;font-size:23px}.ot-receipt-facts>div:first-child strong small{display:inline;color:#597e7a;font-size:11px} .ot-match-head,.ot-section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 9px}.ot-match-head h4,.ot-section-heading h4,.ot-status-edit h4{margin:0;color:#294747;font-size:13px}.ot-match-head p,.ot-section-heading p,.ot-status-edit p{margin:2px 0 0;color:#91a09e;font-size:10px}.ot-link-button,.ot-text-action{border:0;background:transparent;padding:4px;color:#137b72;font-size:11px;font-weight:800;cursor:pointer}.ot-link-button:hover,.ot-text-action:hover{text-decoration:underline}.ot-order-candidates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:238px;overflow:auto;padding:1px 2px 4px;scrollbar-width:thin}.ot-order-card{width:100%;min-width:0;display:grid;gap:6px;padding:10px 11px;border:1px solid #e7eeec;border-radius:10px;background:#fff;text-align:left;color:#304a4a;cursor:pointer}.ot-order-card:hover{border-color:#8bc4b9;background:#f8fcfb}.ot-order-card.is-selected{border-color:#52a99a;background:#eef8f5;box-shadow:0 0 0 2px #65b2a414}.ot-order-card-top,.ot-order-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}.ot-order-card-top>strong{font-size:12px;color:#294646}.ot-order-card-meta{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#829390;font-size:10px}.ot-order-card-bottom b{color:#16796e;font-size:14px}.ot-order-card-bottom b small{color:#80918e;font-size:9px;font-weight:600}.ot-order-card-bottom>small{color:#91a09d;font-size:9px}.ot-status{display:inline-flex;align-items:center;gap:4px;width:max-content;max-width:100%;white-space:nowrap;padding:4px 7px;border:1px solid transparent;border-radius:99px;font-size:9px;font-weight:850}.ot-status-review{background:#f0f4f3;color:#5a7471;border-color:#e1eae8}.ot-status-waiting{background:#fff5de;color:#94620f;border-color:#f4e1b5}.ot-status-closed{background:#eaf6ee;color:#317651;border-color:#d2ead9}.ot-status-unreceived{background:#eef4ff;color:#5074ac;border-color:#dbe6fb}.ot-empty-inline{grid-column:1/-1;padding:15px;text-align:center;border:1px dashed #e0eae7;border-radius:10px;color:#8a9b98;font-size:11px} .ot-match-workspace{margin-top:14px;padding:13px;border:1px solid #dcebe7;border-radius:12px;background:#f9fcfb}.ot-match-selected{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:11px}.ot-match-preview img{width:100px;height:104px;display:block;object-fit:contain;border-radius:9px;border:1px solid #e6efec;background:#fff}.ot-match-preview .ot-image-placeholder{min-height:104px}.ot-match-selected strong{display:block;margin:4px 0;color:#2a4847;font-size:12px;line-height:1.7}.ot-match-selected p{margin:0;color:#82938f;font-size:10px}.ot-allocation-list{display:grid;gap:6px;margin-top:12px}.ot-allocation-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;background:white;border:1px solid #e8efed;border-radius:9px}.ot-allocation-row>span:first-child{font-size:11px;font-weight:800;color:#355352}.ot-allocation-row>span:first-child small{display:block;color:#8b9b99;font-size:9px;font-weight:550}.ot-qty-input{display:flex;align-items:center;gap:5px}.ot-qty-input input{width:86px;height:34px;padding:5px 8px;border:1px solid #dce6e3;border-radius:8px;text-align:right;color:#1b766d;font-size:13px;font-weight:800}.ot-qty-input small{color:#7b8d89;font-size:10px}.ot-total-check{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:9px;padding:9px 10px;border-radius:8px;background:#fff4e7;color:#915a12;font-size:10px}.ot-total-check strong{font-size:14px}.ot-total-check small{font-size:9px}.ot-total-check.is-valid{background:#ebf7ef;color:#347c52}.ot-variance{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:9px;padding:8px 10px;border-radius:8px;background:#eef5ff;color:#496890;font-size:10px}.ot-variance strong{color:#284f85}.ot-variance small{flex-basis:100%;color:#7d90aa;font-size:9px}.ot-checkline{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding:9px;border:1px solid #f0d99f;border-radius:8px;background:#fff9e9;color:#745312;font-size:10px;cursor:pointer}.ot-checkline input{margin:2px 0 0;accent-color:#168174}.ot-check-warning{border-color:#e7c2bf;background:#fff5f3;color:#8a433d}.ot-match-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}.ot-match-actions button{flex:1 1 140px;font-size:10px;padding-inline:8px}.ot-text-action{min-height:28px}.ot-match-workspace>.ot-text-action{margin-top:7px}.ot-footer-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:11px;padding-top:8px;border-top:1px solid #edf1f0}.ot-danger-text{color:#a64244}.ot-danger-text:hover{color:#8a2c30} .ot-order-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:15px 0}.ot-order-summary>div{min-width:0;padding:11px;border:1px solid #eaf0ee;border-radius:10px;background:#fafcfb}.ot-order-summary small{display:block;color:#8b9a98;font-size:9px}.ot-order-summary strong{display:block;overflow:hidden;margin-top:4px;text-overflow:ellipsis;white-space:nowrap;color:#31504e;font-size:14px}.ot-order-summary>div:first-child strong,.ot-order-summary>div:nth-child(2) strong{color:#15776d;font-size:18px}.ot-order-large-preview{display:grid;place-items:center;padding:10px;border:1px solid #edf2f0;border-radius:11px;background:#fafcfb}.ot-order-large-preview img{display:block;width:min(100%,440px);height:330px;object-fit:contain;border-radius:8px;background:white}.ot-order-large-preview .ot-image-placeholder{width:min(100%,440px);height:280px}.ot-status-edit{display:grid;grid-template-columns:minmax(130px,1.1fr) minmax(120px,.7fr) minmax(160px,1.2fr) auto;align-items:center;gap:8px;margin:16px 0;padding:13px;border:1px solid #e5eeeb;border-radius:11px;background:#fbfdfc}.ot-status-edit select,.ot-status-edit input{height:38px;width:100%;min-width:0;padding:7px 9px;border:1px solid #dce6e3;border-radius:8px;background:white;color:#385250;font-size:11px}.ot-status-edit .ot-button{min-height:36px;font-size:10px}.ot-rounds{margin-top:16px}.ot-rounds>.ot-section-heading{padding-bottom:8px;border-bottom:1px solid #ebf1ef}.ot-round-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 3px;border-bottom:1px solid #eff3f2}.ot-round-thumb{width:48px;height:48px;display:grid;place-items:center;overflow:hidden;border-radius:8px;background:#f0f4f3;color:#8d9e9a}.ot-round-copy{min-width:0;display:grid;gap:2px}.ot-round-copy strong{color:#355150;font-size:11px}.ot-round-copy span,.ot-round-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#83938f;font-size:9px}.ot-round-card>.ot-text-action{font-size:9px}.ot-order-list{display:grid;align-content:start;gap:6px} .ot-history{padding:clamp(15px,2vw,24px);border:1px solid var(--ot-line);border-radius:15px;background:white;min-height:450px}.ot-history-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:12px}.ot-history-head h3{margin:0;color:#294646;font-size:17px}.ot-history-head p{margin:3px 0;color:#82938f;font-size:11px}.ot-history-head .ot-search{width:min(310px,42%);margin:0}.ot-timeline{display:grid}.ot-event{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;padding:12px 6px;border-top:1px solid #edf2f0}.ot-event-dot{position:relative;width:10px;height:10px;margin:5px 0 0 2px;border-radius:50%;background:#62a69c;box-shadow:0 0 0 4px #eaf5f2}.ot-event-match{background:#4e9eb6}.ot-event-undo-match{background:#ce6662}.ot-event-no-order{background:#c99d4b}.ot-event strong{color:#395452;font-size:12px}.ot-event p{margin:2px 0;color:#7b8d89;font-size:10px}.ot-event small{color:#9aa8a5;font-size:9px}.ot-event-type{align-self:center;white-space:nowrap;padding:4px 7px;border-radius:20px;background:#f1f6f4;color:#69817d;font-size:9px;font-weight:800}.ot-history-empty{min-height:300px} .ot-loading,.ot-error{min-height:390px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:#718783;text-align:center}.ot-loading strong,.ot-error strong{color:#35514e;font-size:14px}.ot-loading small,.ot-error p{max-width:450px;margin:0;color:#879793;font-size:11px}.ot-error .ot-button{margin-top:5px}.ot-spinner{width:30px;height:30px;border:3px solid #d9eeea;border-top-color:#168174;border-radius:50%;animation:ot-spin .8s linear infinite}@keyframes ot-spin{to{transform:rotate(360deg)}}.ot-inline-error{margin-bottom:11px;padding:9px 12px;border-radius:9px;background:#fff1ee;color:#a54c43;font-size:11px}.ot-inline-error button{margin-left:7px;border:0;background:transparent;color:inherit;font-weight:800;cursor:pointer}.ot-toast{position:fixed;right:25px;bottom:24px;z-index:70;max-width:min(440px,calc(100vw - 30px));padding:11px 16px;border-radius:10px;background:#1b5550;color:#fff;box-shadow:0 8px 30px #193f3d30;opacity:0;transform:translateY(10px);pointer-events:none;transition:.18s ease;font-size:12px}.ot-toast.is-visible{opacity:1;transform:translateY(0)}.ot-toast.is-error{background:#9f3f39}.ot-dialog[open]{z-index:65;position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:20px;border:0;background:#152c2b88;display:grid;place-items:center}.ot-dialog form{width:min(490px,100%);padding:23px;border-radius:17px;background:white;box-shadow:0 20px 70px #0e2e2a40}.ot-dialog-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#e9f6f3;color:#147b70;font-size:19px}.ot-dialog h3{margin:11px 0 4px;color:#274746;font-size:18px}.ot-dialog p{margin:0 0 14px;color:#7f918c;font-size:11px;line-height:1.65}.ot-dialog label{display:block;margin:0 0 5px;color:#536c68;font-size:11px;font-weight:800}.ot-dialog textarea{width:100%;min-height:105px;resize:vertical;padding:10px;border:1px solid #dce8e4;border-radius:9px;font-size:12px}.ot-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.ot-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media(max-width:1100px){.ot-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.ot-workbench{grid-template-columns:minmax(255px,310px) minmax(0,1fr)}.ot-compare{grid-template-columns:1fr}.ot-compare figure>img{height:215px}.ot-receipt-facts{grid-template-columns:repeat(3,minmax(0,1fr))}.ot-status-edit{grid-template-columns:1fr 1fr}.ot-status-edit>div:first-child{grid-column:1/-1}} @media(max-width:740px){.ot-shell{padding:10px}.ot-header{align-items:center;margin-bottom:13px}.ot-header h2{font-size:25px}.ot-header p{max-width:530px;font-size:11px}.ot-kpis{gap:7px;margin-bottom:13px}.ot-kpi{min-height:76px;gap:8px;padding:10px;border-radius:11px}.ot-kpi-icon{width:32px;height:32px;font-size:17px;border-radius:10px}.ot-kpi strong{font-size:22px}.ot-kpi small{font-size:9px}.ot-kpi div>span{font-size:8px}.ot-tabs{width:100%;justify-content:space-between;margin-bottom:10px}.ot-tabs button{flex:1;padding:6px 5px;font-size:10px}.ot-workbench{grid-template-columns:1fr;gap:9px;min-height:0}.ot-list-panel{min-height:0;max-height:330px}.ot-detail{min-height:420px;padding:14px}.ot-receipt-list,.ot-order-list{max-height:226px}.ot-order-candidates{grid-template-columns:1fr;max-height:245px}.ot-detail-heading h3{font-size:17px}.ot-receipt-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.ot-receipt-facts>div:first-child{grid-column:span 2}.ot-match-head{align-items:flex-start}.ot-link-button{white-space:normal;text-align:right}.ot-match-selected{grid-template-columns:80px minmax(0,1fr)}.ot-match-preview img{width:80px;height:87px}.ot-match-actions{display:grid;grid-template-columns:1fr}.ot-match-actions button{min-height:39px}.ot-order-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.ot-order-large-preview img{height:260px}.ot-status-edit{grid-template-columns:1fr 1fr}.ot-status-edit .ot-status-note{grid-column:1/-1}.ot-status-edit .ot-button{grid-column:1/-1}.ot-history-head{display:grid;gap:8px}.ot-history-head .ot-search{width:100%}.ot-event{grid-template-columns:15px minmax(0,1fr);gap:8px}.ot-event-type{grid-column:2;justify-self:start}.ot-round-card{grid-template-columns:42px minmax(0,1fr);gap:8px}.ot-round-thumb{width:42px;height:42px}.ot-round-card>.ot-text-action{grid-column:2;justify-self:start;padding-left:0}.ot-empty-steps{flex-direction:column;align-items:flex-start}.ot-alert{align-items:flex-start}.ot-alert-warning span{flex-basis:100%}} @media(max-width:400px){.ot-kpi{padding:8px}.ot-kpi div{column-gap:5px}.ot-kpi strong{font-size:19px}.ot-tabs button{font-size:9px}.ot-receipt-filters button{padding:5px 6px}.ot-detail-heading{gap:5px}.ot-pill{font-size:9px}.ot-total-check{align-items:flex-start;flex-direction:column}.ot-footer-actions{flex-wrap:wrap}.ot-order-summary strong{font-size:12px}} #view-order-tracking .ot-eyebrow{font-size:12px} #view-order-tracking .ot-kpi small,#view-order-tracking .ot-kpi div>span{font-size:12px} #view-order-tracking .ot-list-heading small,#view-order-tracking .ot-tabs button,#view-order-tracking .ot-receipt-filters button,#view-order-tracking .ot-search input{font-size:14px} #view-order-tracking .ot-receipt-copy strong{font-size:14px} #view-order-tracking .ot-receipt-copy span,#view-order-tracking .ot-receipt-copy>small,#view-order-tracking .ot-receipt-qty small,#view-order-tracking .ot-empty-list span,#view-order-tracking .ot-empty-steps span{font-size:12px} #view-order-tracking .ot-receipt-qty strong{font-size:20px} #view-order-tracking .ot-detail-heading p,#view-order-tracking .ot-pill,#view-order-tracking .ot-alert,#view-order-tracking .ot-compare figcaption,#view-order-tracking .ot-order-large-preview figcaption{font-size:12px} #view-order-tracking .ot-receipt-facts small,#view-order-tracking .ot-match-head p,#view-order-tracking .ot-section-heading p,#view-order-tracking .ot-status-edit p,#view-order-tracking .ot-link-button,#view-order-tracking .ot-text-action{font-size:12px} #view-order-tracking .ot-receipt-facts strong{font-size:14px} #view-order-tracking .ot-order-card-top>strong,#view-order-tracking .ot-order-card-bottom b{font-size:14px} #view-order-tracking .ot-order-card-meta,#view-order-tracking .ot-order-card-bottom b small,#view-order-tracking .ot-order-card-bottom>small,#view-order-tracking .ot-status,#view-order-tracking .ot-empty-inline{font-size:12px} #view-order-tracking .ot-match-selected p,#view-order-tracking .ot-allocation-row>span:first-child small,#view-order-tracking .ot-qty-input small,#view-order-tracking .ot-total-check,#view-order-tracking .ot-total-check small,#view-order-tracking .ot-variance,#view-order-tracking .ot-variance small,#view-order-tracking .ot-checkline{font-size:12px} #view-order-tracking .ot-match-actions button{font-size:12px} #view-order-tracking .ot-order-summary small,#view-order-tracking .ot-status-edit .ot-button,#view-order-tracking .ot-round-copy span,#view-order-tracking .ot-round-copy small,#view-order-tracking .ot-round-card>.ot-text-action{font-size:12px} #view-order-tracking .ot-event p,#view-order-tracking .ot-event small,#view-order-tracking .ot-event-type,#view-order-tracking .ot-loading small,#view-order-tracking .ot-error p{font-size:12px} #view-order-tracking .ot-source-current{flex:1 1 100%;display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:10px;padding:9px;border:1px solid #f2e0bd;border-radius:9px;background:#fffdf7;color:#755316} #view-order-tracking .ot-source-current img,#view-order-tracking .ot-source-no-image{width:64px;height:64px;display:grid;place-items:center;object-fit:cover;border-radius:8px;background:#f4eee0;color:#9a855f;font-size:20px} #view-order-tracking .ot-source-current small,#view-order-tracking .ot-source-current span{display:block;color:#8b713f;font-size:12px} #view-order-tracking .ot-source-current strong{display:block;margin:2px 0;font-size:14px} @media(max-width:740px){#view-order-tracking .ot-tabs button,#view-order-tracking .ot-kpi small,#view-order-tracking .ot-kpi div>span,#view-order-tracking .ot-match-actions button{font-size:12px}} /* Clear side-by-side comparison for receipt matching */ #view-order-tracking .ot-match-detail{padding:clamp(14px,1.7vw,22px)} #view-order-tracking .ot-match-compare{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);align-items:stretch;gap:10px;margin:15px 0 20px;padding:12px;border:1px solid #e0ebe8;border-radius:15px;background:linear-gradient(135deg,#fbfdfc,#f3f8f6)} #view-order-tracking .ot-compare-card{min-width:0;padding:12px;border:1px solid #dce9e6;border-radius:13px;background:#fff;box-shadow:0 3px 12px #1b504607} #view-order-tracking .ot-compare-incoming{border-color:#cce7e1} #view-order-tracking .ot-compare-order{border-color:#d6e1f2} #view-order-tracking .ot-compare-card-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px} #view-order-tracking .ot-compare-card-heading small,#view-order-tracking .ot-compare-card-heading strong{display:block} #view-order-tracking .ot-compare-card-heading small{color:#708582;font-size:12px;font-weight:750} #view-order-tracking .ot-compare-card-heading strong{margin-top:1px;color:#274746;font-size:14px} #view-order-tracking .ot-compare-badge{flex:none;padding:5px 8px;border-radius:99px;background:#eaf7f2;color:#187664;font-size:12px;font-weight:800} #view-order-tracking .ot-compare-badge-order{background:#eef3fc;color:#466ba0} #view-order-tracking .ot-compare-image{display:grid;place-items:center;min-height:205px;overflow:hidden;border:1px solid #e6eeeb;border-radius:11px;background:#f3f6f5} #view-order-tracking .ot-compare-image .ot-match-photo{width:100%;height:205px;display:block;object-fit:contain;background:#f3f6f5} #view-order-tracking .ot-compare-image .ot-image-placeholder{width:100%;height:205px;min-height:205px;border:0;border-radius:0;background:#f7faf9} #view-order-tracking .ot-compare-identity{min-width:0;margin-top:9px} #view-order-tracking .ot-compare-identity strong{display:block;overflow:hidden;color:#203e3f;font-size:16px;text-overflow:ellipsis;white-space:nowrap} #view-order-tracking .ot-compare-identity strong small{margin-left:5px;color:#43867d;font-size:13px} #view-order-tracking .ot-compare-identity span{display:block;overflow:hidden;margin-top:2px;color:#718582;font-size:12px;text-overflow:ellipsis;white-space:nowrap} #view-order-tracking .ot-compare-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px} #view-order-tracking .ot-compare-fact{min-width:0;min-height:67px;display:flex;flex-direction:column;justify-content:center;padding:9px 10px;border:1px solid #e7eeec;border-radius:9px;background:#f9fbfa} #view-order-tracking .ot-compare-fact>small{color:#6f8581;font-size:12px} #view-order-tracking .ot-compare-fact>strong{margin-top:2px;color:#355251;font-size:20px;font-weight:850;line-height:1.15} #view-order-tracking .ot-compare-fact>strong i,#view-order-tracking .ot-compare-quantity i{font-size:12px;font-style:normal;font-weight:700;color:#708582} #view-order-tracking .ot-compare-fact-emphasis{background:#eaf7f2;border-color:#cde9df} #view-order-tracking .ot-compare-fact-emphasis>strong{color:#117467;font-size:23px} #view-order-tracking .ot-compare-order-facts{grid-template-columns:repeat(3,minmax(0,1fr))} #view-order-tracking .ot-compare-fact-current{background:#eef7ff;border-color:#d9e8f7} #view-order-tracking .ot-compare-fact-current>small{color:#466b95;font-weight:750} #view-order-tracking .ot-compare-quantity{display:flex;align-items:center;gap:5px;margin-top:4px} #view-order-tracking .ot-compare-quantity input{width:min(100%,86px);height:37px;padding:3px 7px;border:1px solid #abc9e2;border-radius:8px;background:#fff;color:#245581;font-size:17px;font-weight:850;text-align:right} #view-order-tracking .ot-shipment-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px} #view-order-tracking .ot-shipment-meta span{max-width:100%;overflow:hidden;padding:4px 7px;border-radius:7px;background:#f4f7f6;color:#5d7470;font-size:12px;text-overflow:ellipsis;white-space:nowrap} #view-order-tracking .ot-shipment-meta b{color:#81928f;font-weight:650} #view-order-tracking .ot-compare-join{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#71908a} #view-order-tracking .ot-compare-join span{font-size:12px;font-weight:750} #view-order-tracking .ot-compare-join strong{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#e5f3ef;color:#17776d;font-size:20px} #view-order-tracking .ot-compare-unselected{min-height:205px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px dashed #cbdad6;border-radius:11px;background:#f8fbfa;text-align:center;color:#79908b} #view-order-tracking .ot-compare-unselected>span{width:39px;height:39px;display:grid;place-items:center;border-radius:50%;background:#e5f2ee;color:#19796d;font-size:25px} #view-order-tracking .ot-compare-unselected strong{color:#365955;font-size:14px} #view-order-tracking .ot-compare-unselected small,#view-order-tracking .ot-compare-hint{color:#718582;font-size:12px} #view-order-tracking .ot-compare-hint{margin:7px 0 0} #view-order-tracking .ot-match-workspace{margin-top:13px} #view-order-tracking .ot-match-workspace-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#33504e;font-size:14px} #view-order-tracking .ot-match-workspace-heading span{color:#718582;font-size:12px} @media(max-width:1100px){#view-order-tracking .ot-match-compare{grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);gap:7px;padding:9px}#view-order-tracking .ot-compare-card{padding:9px}#view-order-tracking .ot-compare-order-facts{grid-template-columns:repeat(2,minmax(0,1fr))}#view-order-tracking .ot-compare-fact-current{grid-column:1/-1}} @media(max-width:740px){#view-order-tracking .ot-match-compare{grid-template-columns:minmax(0,1fr);gap:7px;margin:12px 0 16px;padding:8px}#view-order-tracking .ot-compare-join{flex-direction:row;gap:7px}#view-order-tracking .ot-compare-join strong{transform:rotate(90deg)}#view-order-tracking .ot-compare-card{padding:10px}#view-order-tracking .ot-compare-image,#view-order-tracking .ot-compare-unselected{min-height:180px}#view-order-tracking .ot-compare-image .ot-match-photo,#view-order-tracking .ot-compare-image .ot-image-placeholder{height:180px;min-height:180px}#view-order-tracking .ot-compare-order-facts{grid-template-columns:repeat(3,minmax(0,1fr))}#view-order-tracking .ot-compare-fact-current{grid-column:auto}#view-order-tracking .ot-compare-fact{padding:8px;min-height:62px}#view-order-tracking .ot-compare-fact>strong{font-size:17px}#view-order-tracking .ot-compare-fact-emphasis>strong{font-size:20px}#view-order-tracking .ot-compare-quantity input{height:34px;font-size:16px}} @media(max-width:390px){#view-order-tracking .ot-compare-order-facts{grid-template-columns:repeat(2,minmax(0,1fr))}#view-order-tracking .ot-compare-fact-current{grid-column:1/-1}#view-order-tracking .ot-compare-card-heading{align-items:flex-start}} #view-order-tracking .ot-compare-image.ot-image-error{position:relative;background:#f7faf9} #view-order-tracking .ot-compare-image.ot-image-error::after{content:"โหลดรูปไม่สำเร็จ";color:#8a9a97;font-size:13px} /* Keep the receipt queue readable and make order selection part of the comparison card. */ #view-order-tracking .ot-kpi{min-height:74px;padding:11px 13px} #view-order-tracking .ot-kpi-icon{width:34px;height:34px;font-size:18px} #view-order-tracking .ot-kpi strong{font-size:23px} #view-order-tracking .ot-workbench{align-items:start;min-height:0} #view-order-tracking .ot-workbench:not(.ot-orders-workbench) .ot-list-panel{position:sticky;top:12px;height:min(70vh,680px);min-height:390px} #view-order-tracking .ot-list-panel>.ot-receipt-list,#view-order-tracking .ot-list-panel>.ot-order-list{flex:1;min-height:0;max-height:none} #view-order-tracking .ot-compare-card-heading{flex-wrap:wrap} #view-order-tracking .ot-picker-toggle{flex:none;padding:6px 9px;border:1px solid #cdddf0;border-radius:8px;background:#f2f6fc;color:#345d91;font-size:12px;font-weight:800;cursor:pointer} #view-order-tracking .ot-picker-toggle:hover{background:#e7effb;border-color:#adc4e2} #view-order-tracking .ot-compare-unselected-compact{min-height:62px;flex-direction:row;justify-content:flex-start;padding:9px 12px} #view-order-tracking .ot-compare-unselected-compact>span{width:31px;height:31px;font-size:20px} #view-order-tracking .ot-order-picker{margin-top:11px;padding-top:10px;border-top:1px solid #e6edf3} #view-order-tracking .ot-picker-heading{display:flex;align-items:center;justify-content:space-between;gap:8px} #view-order-tracking .ot-picker-heading strong{color:#2d4e69;font-size:13px} #view-order-tracking .ot-picker-heading small{display:block;margin-top:2px;color:#73899b;font-size:11px} #view-order-tracking .ot-picker-heading .ot-picker-round-note{color:#348071;font-weight:700} #view-order-tracking .ot-picker-heading .ot-link-button{flex:none;white-space:nowrap;padding-inline:6px;font-size:11px} #view-order-tracking .ot-order-picker-search{margin:8px 0 7px} #view-order-tracking .ot-order-picker .ot-order-candidates{grid-template-columns:1fr;max-height:280px;padding:1px 2px 4px} #view-order-tracking .ot-candidate-mismatch-note{display:grid;gap:2px;margin:8px 0;padding:8px 10px;border:1px solid #efd9a5;border-radius:9px;background:#fff8e8;color:#765c2a} #view-order-tracking .ot-candidate-mismatch-note strong{font-size:12px} #view-order-tracking .ot-candidate-mismatch-note span{font-size:11px;line-height:1.4;color:#8b7242} #view-order-tracking .ot-picker-empty{display:grid;justify-items:start;gap:5px;margin-top:8px;padding:12px;border:1px solid #ecdcb4;border-radius:10px;background:#fff9eb;color:#65746f} #view-order-tracking .ot-picker-empty-icon{width:29px;height:29px;display:grid;place-items:center;border-radius:9px;background:#f7edcf;color:#9a7020;font-size:16px} #view-order-tracking .ot-picker-empty strong{color:#765a25;font-size:12px} #view-order-tracking .ot-picker-empty>span:last-child{font-size:11px;line-height:1.55} @media(max-width:740px){ #view-order-tracking .ot-workbench:not(.ot-orders-workbench) .ot-list-panel{position:static;top:auto;height:auto;min-height:0;max-height:330px} #view-order-tracking .ot-list-panel>.ot-receipt-list{flex:1;min-height:70px;max-height:226px} #view-order-tracking .ot-kpi{min-height:70px;padding:9px} #view-order-tracking .ot-order-picker .ot-order-candidates{max-height:240px} } /* Put the order number and month in a strong left band, like the incoming list. */ #view-order-tracking .ot-order-card{grid-template-columns:74px minmax(0,1fr);align-items:stretch;gap:0;padding:0;border-radius:11px;overflow:hidden} #view-order-tracking .ot-order-card-band{min-height:82px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:7px 4px;border:0;border-right:1px solid #bce8e0;border-radius:0;background:linear-gradient(155deg,#168477,#0d6f66);text-align:center} #view-order-tracking .ot-order-card-band strong{color:#fff;font-size:26px;line-height:1.05;font-weight:900;letter-spacing:-.035em} #view-order-tracking .ot-order-card-band span{color:#e1faf5;font-size:13px;line-height:1.25;font-weight:850} #view-order-tracking .ot-order-card-band small{color:#bce8e0;font-size:10px;line-height:1.2} #view-order-tracking .ot-order-card-content{min-width:0;display:grid;align-content:center;gap:5px;padding:8px 10px} #view-order-tracking .ot-order-card-top{min-width:0} #view-order-tracking .ot-order-card-top>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#294646;font-size:14px} #view-order-tracking .ot-order-card-meta{color:#718582;font-size:12px} #view-order-tracking .ot-order-card-bottom{align-items:baseline;flex-wrap:wrap;gap:2px 8px} #view-order-tracking .ot-order-card-bottom b{font-size:14px} #view-order-tracking .ot-order-card-bottom b small{font-size:11px} #view-order-tracking .ot-order-card-bottom>small{margin-left:auto;color:#548078;font-size:11px;font-weight:750;text-align:right;line-height:1.35} #view-order-tracking .ot-order-card.is-selected .ot-order-card-band{border-color:#075c55;background:linear-gradient(155deg,#0f7067,#095e57)} #view-order-tracking .ot-order-card:disabled{cursor:not-allowed;opacity:.6} #view-order-tracking .ot-late-round-note{display:flex;align-items:flex-start;gap:9px;margin:8px 0 10px;padding:9px 11px;border:1px solid #cfe7de;border-radius:10px;background:#eff8f4;color:#2d6258} #view-order-tracking .ot-late-round-note>span{width:25px;height:25px;flex:none;display:grid;place-items:center;border-radius:50%;background:#d9eee7;color:#14776d;font-size:17px;font-weight:900} #view-order-tracking .ot-late-round-note strong,#view-order-tracking .ot-late-round-note small{display:block} #view-order-tracking .ot-late-round-note strong{font-size:13px} #view-order-tracking .ot-late-round-note small{margin-top:1px;color:#63847c;font-size:11px;line-height:1.45} @media(max-width:740px){ #view-order-tracking .ot-order-card{grid-template-columns:64px minmax(0,1fr);gap:0;padding:0} #view-order-tracking .ot-order-card-band{min-height:76px} #view-order-tracking .ot-order-card-band strong{font-size:21px} #view-order-tracking .ot-order-card-content{padding:7px 9px} #view-order-tracking .ot-order-card-bottom>small{margin-left:0;text-align:left} #view-order-tracking .ot-late-round-note small{font-size:12px} } #view-order-tracking .ot-order-picker .ot-order-card-content{gap:4px} #view-order-tracking .ot-order-picker .ot-order-card-top{display:grid;grid-template-columns:minmax(0,1fr);justify-content:start;gap:3px} #view-order-tracking .ot-order-picker .ot-order-card-top>strong{font-size:13px;line-height:1.2;white-space:normal;overflow-wrap:anywhere} #view-order-tracking .ot-order-picker .ot-order-card-top>.ot-status{justify-self:start;max-width:100%;padding:2px 6px;white-space:normal;font-size:10px;line-height:1.25} #view-order-tracking .ot-order-picker .ot-order-card-meta{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;line-height:1.3} #view-order-tracking .ot-order-picker .ot-order-card-bottom>small{margin-left:0;text-align:left} /* Matching has two independent lists surrounding the image comparison. */ #view-order-tracking .ot-match-workbench{grid-template-columns:minmax(210px,.85fr) minmax(400px,1.8fr) minmax(240px,.95fr);gap:12px} #view-order-tracking .ot-workbench.ot-match-workbench>.ot-list-panel{position:sticky;top:82px;height:clamp(1250px,175dvh,1900px);min-height:390px} #view-order-tracking .ot-match-order-panel{border-color:#d6e1f2;overflow:hidden;padding:12px} #view-order-tracking .ot-match-order-panel>.ot-order-picker{display:flex;flex-direction:column;flex:1;min-height:0;margin:0;padding:0;border:0} #view-order-tracking .ot-match-order-panel .ot-picker-heading{align-items:flex-start;flex:none} #view-order-tracking .ot-match-order-panel .ot-picker-heading strong{font-size:15px} #view-order-tracking .ot-match-order-panel .ot-picker-heading small{font-size:12px} #view-order-tracking .ot-match-order-panel .ot-candidate-mismatch-note,#view-order-tracking .ot-match-order-panel .ot-order-picker-search{flex:none} #view-order-tracking .ot-match-order-panel .ot-order-candidates{flex:1;min-height:0;max-height:none;align-content:start;grid-auto-rows:max-content;overscroll-behavior:contain} #view-order-tracking .ot-match-workbench .ot-match-detail{padding:14px} #view-order-tracking .ot-match-workbench .ot-match-compare{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);gap:6px;padding:8px} #view-order-tracking .ot-match-workbench .ot-compare-card{padding:9px} #view-order-tracking .ot-match-workbench .ot-compare-join strong{width:28px;height:28px} #view-order-tracking .ot-match-workbench .ot-compare-order-facts{grid-template-columns:repeat(2,minmax(0,1fr))} #view-order-tracking .ot-match-workbench .ot-compare-fact-current{grid-column:1/-1} #view-order-tracking .ot-match-workbench .ot-compare-identity strong{white-space:normal} #view-order-tracking .ot-match-workbench .ot-match-actions{display:grid;grid-template-columns:1fr} @media(max-width:1180px){ #view-order-tracking .ot-match-workbench{grid-template-columns:repeat(2,minmax(0,1fr))} #view-order-tracking .ot-workbench.ot-match-workbench>.ot-list-panel{position:static;top:auto;height:1100px;min-height:0;max-height:none;grid-row:1} #view-order-tracking .ot-match-workbench>.ot-match-order-panel{grid-column:2} #view-order-tracking .ot-match-workbench>.ot-detail-panel{grid-column:1/-1;grid-row:2} #view-order-tracking .ot-match-workbench .ot-match-actions{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:740px){ #view-order-tracking .ot-match-workbench{grid-template-columns:minmax(0,1fr)} #view-order-tracking .ot-workbench.ot-match-workbench>.ot-list-panel{grid-column:1;grid-row:auto;height:880px;max-height:none} #view-order-tracking .ot-match-workbench>.ot-detail-panel{grid-column:1;grid-row:3} #view-order-tracking .ot-match-workbench .ot-match-compare{grid-template-columns:minmax(0,1fr)} #view-order-tracking .ot-match-workbench .ot-compare-order-facts{grid-template-columns:repeat(3,minmax(0,1fr))} #view-order-tracking .ot-match-workbench .ot-compare-fact-current{grid-column:auto} #view-order-tracking .ot-match-workbench .ot-match-actions{grid-template-columns:1fr} } /* Keep the primary matching controls close to the comparison. */ #view-order-tracking .ot-shell{max-width:1800px;padding:18px} #view-order-tracking .ot-header{margin-bottom:12px;align-items:center} #view-order-tracking .ot-header h2{font-size:28px} #view-order-tracking .ot-header p{font-size:13px} #view-order-tracking .ot-kpis{margin-bottom:12px} #view-order-tracking .ot-kpi{min-height:62px;padding:9px 12px} #view-order-tracking .ot-match-workbench .ot-receipt-card{grid-template-columns:48px minmax(0,1fr) auto;gap:7px;padding:10px 6px} #view-order-tracking .ot-match-workbench .ot-receipt-thumb{width:48px;height:56px} #view-order-tracking .ot-match-workbench .ot-receipt-copy strong{white-space:normal;line-height:1.3} #view-order-tracking .ot-match-workbench .ot-receipt-copy strong small{display:block;margin:2px 0 0;font-size:12px} #view-order-tracking .ot-match-workbench .ot-receipt-qty strong{font-size:19px} #view-order-tracking .ot-match-workbench .ot-detail-heading{padding-bottom:10px} #view-order-tracking .ot-match-workbench .ot-match-compare{margin:12px 0} #view-order-tracking .ot-match-workbench .ot-match-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:10px} #view-order-tracking .ot-match-status{display:grid;gap:5px;color:#5f7772;font-size:12px} #view-order-tracking .ot-match-status select{min-width:0;width:100%;height:41px;padding:7px 10px;border:1px solid #cadbd5;border-radius:9px;background:white;color:#254943;font-size:14px} #view-order-tracking .ot-match-actions>.ot-button{min-height:41px;font-size:14px} #view-order-tracking .ot-image-open{position:relative;width:100%;display:block;padding:0;border:0;background:transparent;cursor:zoom-in;color:#fff} #view-order-tracking .ot-image-open>img{width:100%;display:block;object-fit:contain} #view-order-tracking .ot-image-open>span{position:absolute;right:7px;bottom:7px;padding:4px 8px;border:1px solid #ffffff70;border-radius:7px;background:#163e3dd9;color:white;font-size:12px;font-weight:750} #view-order-tracking .ot-image-dialog{position:fixed;inset:0;width:calc(100vw - 32px);height:calc(100vh - 32px);max-width:1400px;max-height:none;margin:auto;padding:16px;border:1px solid #d2e4df;border-radius:15px;background:#f8fbfa} #view-order-tracking .ot-image-dialog::backdrop{background:#112b30c9} #view-order-tracking .ot-image-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;color:#254943} #view-order-tracking .ot-image-dialog>img{display:block;width:100%;height:calc(100% - 54px);object-fit:contain} #view-order-tracking .ot-match-workbench .ot-variance{flex-wrap:wrap} @media(max-width:740px){#view-order-tracking .ot-shell{padding:10px}#view-order-tracking .ot-header h2{font-size:24px}#view-order-tracking .ot-match-workbench .ot-match-actions{grid-template-columns:1fr}#view-order-tracking .ot-image-dialog{padding:10px;width:calc(100vw - 16px);height:calc(100dvh - 16px)}} /* Image-led candidates and compact confirmation, with independent scrolling lists. */ #view-order-tracking .ot-order-card-visual{display:flex;align-items:center;gap:8px;min-width:0} #view-order-tracking .ot-order-thumb{display:grid;place-items:center;flex:none;width:54px;height:58px;border-radius:6px;overflow:hidden;background:#edf3f1;color:#76908a} #view-order-tracking .ot-order-thumb img{width:100%;height:100%;object-fit:contain} #view-order-tracking .ot-order-card-visual>.ot-order-card-top{flex:1;min-width:0} #view-order-tracking .ot-order-picker .ot-order-card-top>.ot-status{font-size:12px} #view-order-tracking .ot-order-card-bottom b{font-size:14px} #view-order-tracking .ot-order-card-bottom b small{font-size:13px} #view-order-tracking .ot-order-card-band small{font-size:12px} #view-order-tracking .ot-order-filters{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0 0 9px;flex:none} #view-order-tracking .ot-order-filters label{display:grid;gap:4px;min-width:0;font-size:12px;color:#506d67} #view-order-tracking .ot-order-filters select{width:100%;min-width:0;height:36px;padding:4px;border:1px solid #d3e0dc;border-radius:7px;background:white;color:#294b44;font-size:13px} #view-order-tracking .ot-candidate-group{grid-column:1/-1;padding:7px 4px;color:#15796e;font-weight:800;font-size:13px} #view-order-tracking .ot-candidate-group.is-other{color:#94620f;border-top:1px solid #e4ebe8;margin-top:4px} #view-order-tracking .ot-match-workbench{grid-template-columns:minmax(210px,.78fr) minmax(440px,1.9fr) minmax(280px,1fr)} #view-order-tracking .ot-match-workbench .ot-match-compare{padding:0;gap:6px;margin:8px 0} #view-order-tracking .ot-match-workbench .ot-compare-card{padding:8px} #view-order-tracking .ot-match-workbench .ot-compare-image{min-height:clamp(240px,19vw,350px)} #view-order-tracking .ot-match-workbench .ot-compare-image .ot-match-photo,#view-order-tracking .ot-match-workbench .ot-compare-image .ot-image-placeholder{height:clamp(240px,19vw,350px);min-height:240px} #view-order-tracking .ot-match-workbench .ot-compare-card-heading{margin-bottom:7px} #view-order-tracking .ot-match-workbench .ot-compare-card-heading strong{font-size:14px} #view-order-tracking .ot-match-workbench .ot-compare-order-facts{grid-template-columns:repeat(3,minmax(0,1fr))} #view-order-tracking .ot-match-workbench .ot-compare-fact-current{grid-column:auto} #view-order-tracking .ot-match-workbench .ot-match-workspace{margin-top:8px;padding:10px} #view-order-tracking .ot-match-workspace-heading{display:flex;justify-content:space-between;gap:8px;font-size:14px} #view-order-tracking .ot-match-workspace-heading>span{font-size:12px;color:#647f77} #view-order-tracking .ot-total-check,#view-order-tracking .ot-variance,#view-order-tracking .ot-checkline{font-size:14px} #view-order-tracking .ot-total-check small,#view-order-tracking .ot-variance small{font-size:12px} #view-order-tracking .ot-match-workbench .ot-match-actions{position:sticky;bottom:10px;background:#f9fcfb;padding:8px;border:1px solid #dcebe7;border-radius:10px;z-index:2;box-shadow:0 3px 12px #183f3010} #view-order-tracking .ot-match-workbench .ot-compare-badge{display:none} @media(max-width:1180px){#view-order-tracking .ot-match-workbench{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:740px){#view-order-tracking .ot-match-workbench{grid-template-columns:minmax(0,1fr)}#view-order-tracking .ot-match-workbench .ot-compare-image .ot-match-photo{height:260px}#view-order-tracking .ot-match-workbench .ot-compare-order-facts{grid-template-columns:repeat(2,minmax(0,1fr))}#view-order-tracking .ot-match-workbench .ot-compare-fact-current{grid-column:1/-1}#view-order-tracking .ot-match-workspace-heading{flex-wrap:wrap}} @media(min-width:1181px) and (max-width:1550px){#view-order-tracking .ot-match-workbench .ot-compare-order-facts{grid-template-columns:repeat(2,minmax(0,1fr))}#view-order-tracking .ot-match-workbench .ot-compare-fact-current{grid-column:1/-1}} #view-order-tracking .ot-compare-quantity input{min-width:0;flex:0 1 86px} /* Keep the decision together: images, cumulative equation and confirmation. */ #view-order-tracking .ot-header .ot-eyebrow,#view-order-tracking .ot-kpi>div>span{display:none} #view-order-tracking .ot-header{margin-bottom:8px} #view-order-tracking .ot-header h2{font-size:24px} #view-order-tracking .ot-header p{margin:2px 0 0} #view-order-tracking .ot-kpis{margin-bottom:8px} #view-order-tracking .ot-kpi{min-height:50px;padding:7px 10px} #view-order-tracking .ot-tabs{margin-bottom:10px} #view-order-tracking .ot-match-workbench .ot-match-detail{padding:10px} #view-order-tracking .ot-match-workbench .ot-detail-heading{padding-bottom:5px} #view-order-tracking .ot-match-workbench .ot-detail-heading .ot-eyebrow{font-size:11px} #view-order-tracking .ot-match-workbench .ot-detail-heading h3{font-size:20px;margin:2px 0} #view-order-tracking .ot-match-workbench .ot-detail-heading p{margin:0} #view-order-tracking .ot-match-workbench .ot-compare-image,#view-order-tracking .ot-match-workbench .ot-compare-image .ot-image-placeholder{min-height:180px} #view-order-tracking .ot-match-workbench .ot-compare-image .ot-match-photo,#view-order-tracking .ot-match-workbench .ot-compare-image .ot-image-placeholder{height:clamp(180px,25vh,260px)} #view-order-tracking .ot-match-workbench .ot-compare-card-heading{margin-bottom:5px} #view-order-tracking .ot-match-workbench .ot-compare-card-heading strong{font-size:13px} #view-order-tracking .ot-match-workbench .ot-compare-facts{gap:5px;margin-top:6px} #view-order-tracking .ot-match-workbench .ot-compare-fact{padding:6px 8px;min-height:49px} #view-order-tracking .ot-match-workbench .ot-compare-identity{margin-top:5px} #view-order-tracking .ot-match-workbench .ot-compare-identity>span{display:none} #view-order-tracking .ot-match-workbench .ot-compare-fact-current{flex-direction:row;align-items:center;justify-content:space-between;gap:6px} #view-order-tracking .ot-match-workbench .ot-compare-quantity{margin-top:0} #view-order-tracking .ot-shipment-details{margin-top:6px;font-size:12px;color:#506d65} #view-order-tracking .ot-shipment-details summary{cursor:pointer} #view-order-tracking .ot-previous-rounds{font-size:12px;padding:3px 0;min-height:24px} #view-order-tracking .ot-match-workspace-heading{display:none} #view-order-tracking .ot-match-workbench .ot-match-workspace{padding:8px;margin-top:6px} #view-order-tracking .ot-total-check{margin-top:0;padding:6px 8px} #view-order-tracking .ot-total-check small{display:none} #view-order-tracking .ot-variance{margin-top:5px;padding:6px 8px;gap:4px} #view-order-tracking .ot-cumulative-equation{display:flex;flex-wrap:wrap;gap:4px 7px;flex-basis:100%;font-size:14px} #view-order-tracking .ot-cumulative-equation b{color:#254f84;font-size:17px} #view-order-tracking .ot-checkline{margin-top:5px;padding:6px 8px;font-size:13px} #view-order-tracking .ot-match-confirmation{position:sticky;bottom:8px;padding:6px 8px;margin-top:6px;background:#f9fcfb;border:1px solid #d2e4dd;border-radius:10px;box-shadow:0 3px 12px #183f3010;z-index:2} #view-order-tracking .ot-match-reason{display:grid;gap:2px;color:#795619;font-size:12px;line-height:1.45} #view-order-tracking .ot-match-workbench .ot-match-actions{position:static;margin-top:5px;padding:0;border:0;box-shadow:none} #view-order-tracking .ot-round-history-dialog{position:fixed;inset:0;width:min(720px,calc(100vw - 24px));max-height:calc(100dvh - 40px);margin:auto;padding:18px;border:1px solid #cfe2da;border-radius:14px;background:#f9fcfb;color:#294c43;overflow:auto} #view-order-tracking .ot-round-history-dialog::backdrop{background:#112b30a8} #view-order-tracking .ot-round-history-dialog header{display:flex;justify-content:space-between;gap:12px;align-items:start;margin-bottom:14px} #view-order-tracking .ot-round-history-dialog header small{display:block;margin-top:4px;font-size:13px} #view-order-tracking .ot-round-history-list{display:grid;gap:10px} #view-order-tracking .ot-history-round{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:10px;background:white;border:1px solid #e0ebe5;border-radius:10px} #view-order-tracking .ot-history-round-image img{height:130px;object-fit:contain} #view-order-tracking .ot-history-round p{margin:5px 0;font-size:14px} #view-order-tracking .ot-history-round small{font-size:12px;color:#637e72} @media(max-width:740px){#view-order-tracking .ot-match-confirmation{bottom:5px}#view-order-tracking .ot-match-workbench .ot-compare-image .ot-match-photo{height:240px}#view-order-tracking .ot-history-round{grid-template-columns:85px minmax(0,1fr)}} @media(min-width:1181px){ #view-order-tracking .ot-match-workbench .ot-compare-image .ot-match-photo,#view-order-tracking .ot-match-workbench .ot-compare-image .ot-image-placeholder{height:clamp(160px,19vh,210px);min-height:160px} #view-order-tracking .ot-match-workbench .ot-compare-image{min-height:160px} #view-order-tracking .ot-match-workbench .ot-compare-order-facts{grid-template-columns:repeat(2,minmax(0,1fr))} #view-order-tracking .ot-match-workbench .ot-compare-fact-current{grid-column:auto;flex-direction:column;align-items:stretch;gap:3px} #view-order-tracking .ot-match-workbench .ot-compare-quantity input{width:100%;flex:1;max-width:86px;padding:3px 4px} #view-order-tracking .ot-match-workbench .ot-compare-quantity i{display:none} } /* Outstanding orders: category overview and image-led order gallery. */ .ot-outstanding-link{margin-left:auto;text-decoration:none;white-space:nowrap}.ot-header>.ot-refresh{flex-shrink:0}.ot-pending-header-actions{display:flex;flex-wrap:wrap;gap:8px}.ot-pending-header{gap:16px}.ot-pending-header p{font-size:14px;line-height:1.6}.ot-pending{font-size:16px;color:#274746}.ot-pending-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 18px}.ot-pending-summary article{padding:18px;border:1px solid #d8e7e2;border-radius:12px;background:#fff}.ot-pending-summary article:nth-child(2){background:#e8f5f0;border-color:#9dcbbc}.ot-pending-summary span{display:block;font-size:14px;color:#536c68}.ot-pending-summary strong{display:block;margin-top:8px;font-size:28px}.ot-pending-summary small{font-size:14px;font-weight:500}.ot-pending-filters{display:grid;grid-template-columns:minmax(220px,2fr) repeat(3,minmax(140px,1fr));align-items:end;gap:12px;padding:16px;border:1px solid #d8e7e2;border-radius:12px;background:#fff}.ot-pending-filters>label{display:grid;gap:6px;font-size:14px}.ot-pending-filters .ot-search{margin:0;display:flex;min-height:42px}.ot-pending-filters input,.ot-pending-filters select{width:100%;min-width:0;min-height:42px;padding:8px 10px;font:inherit;border:1px solid #cfdfda;border-radius:8px;background:#fff;color:#274746}.ot-pending-filters input{border:0}.ot-pending-types{padding:20px 0}.ot-pending h3{margin:0 0 10px;font-size:16px}.ot-pending-groups{display:flex;flex-wrap:wrap;gap:8px}.ot-pending-group{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:140px;padding:12px 16px;border:1px solid #d3e3dd;border-radius:10px;background:#fff;color:#35514e;cursor:pointer;font:inherit;text-align:left}.ot-pending-group strong{font-size:16px}.ot-pending-group span,.ot-pending-group small{font-size:14px}.ot-pending-group.is-active{border-color:#147b70;background:#147b70;color:#fff}.ot-pending-subtypes{margin-bottom:4px}.ot-pending-groups+h3{margin-top:18px}.ot-pending-results>h3{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 14px}.ot-pending-results>h3>span{font-size:14px;font-weight:500;color:#647b74}.ot-pending-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}.ot-pending-card{min-width:0;overflow:hidden;background:#fff;border:1px solid #d6e6df;border-radius:12px;box-shadow:0 3px 10px #15382e08}.ot-pending-card-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;padding:10px 12px;background:#edf5f2;font-size:14px}.ot-pending-card-head span{font-size:12px;color:#765112;background:#fff4db;border-radius:5px;padding:3px 7px}.ot-pending-photo{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center;border:0;border-bottom:1px solid #e5eee9;background:#f9fbfa;cursor:zoom-in;color:#718783;font:inherit;padding:8px}.ot-pending-photo:disabled{cursor:default}.ot-pending-photo img{width:100%;height:100%;object-fit:contain;min-height:0}.ot-pending-zoom{position:absolute;bottom:12px;right:12px;padding:5px 9px;border-radius:6px;background:#ffffffed;color:#274746;font-size:12px;box-shadow:0 2px 8px #15382e20}.ot-pending-card-body{padding:14px}.ot-pending-card-title{display:flex;justify-content:space-between;align-items:start;gap:8px;flex-wrap:wrap}.ot-pending-card-title h3{overflow-wrap:anywhere;font-size:18px}.ot-pending-card-title>strong{font-size:18px;color:#a16215}.ot-pending-card-title small{font-size:14px}.ot-pending-card-body p{margin:4px 0;font-size:14px;line-height:1.6;overflow-wrap:anywhere}.ot-pending-amounts{display:flex;gap:16px;margin:12px 0;color:#536c68;font-size:14px}.ot-pending-card-body>.ot-button{width:100%;min-height:38px;font-size:14px}.ot-pending-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;font-size:14px}.ot-pending-pagination>div{display:flex;align-items:center;gap:10px}.ot-pending :focus-visible,.ot-outstanding-link:focus-visible{outline:3px solid #2b80bd;outline-offset:3px}.ot-pending-header-actions .ot-button{font-size:14px} @media(max-width:1000px){.ot-pending-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.ot-pending-filters>.ot-search{grid-column:1/-1}.ot-pending-summary{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.ot-header{flex-wrap:wrap}.ot-outstanding-link{margin-left:0}.ot-pending-filters{grid-template-columns:1fr}.ot-pending-filters>.ot-search{grid-column:auto}.ot-pending-summary{gap:8px}.ot-pending-summary article{padding:12px}.ot-pending-summary strong{font-size:24px}.ot-pending-grid{grid-template-columns:1fr}.ot-pending-group{flex:1 1 140px}.ot-pending-pagination>div{flex-wrap:wrap}.ot-pending-header h2{font-size:26px}} .ot-legacy-items { display:grid; gap:4px; padding:8px; margin:8px 0; border-radius:8px; background:#edf5f4; font-size:14px; color:#214947; }.ot-legacy-items strong { font-size:14px; } #view-order-tracking .ot-order-filters .ot-pattern-filter{grid-column:1 / -1} #view-order-tracking .ot-kpi-button{font:inherit;text-align:left;cursor:pointer;color:inherit;transition:box-shadow .15s} #view-order-tracking .ot-kpi-button:hover,#view-order-tracking .ot-kpi-button:focus-visible{box-shadow:0 0 0 3px #1a827c40} #view-order-tracking .ot-order-card-band strong{font-size:clamp(16px,1.5vw,22px);overflow-wrap:anywhere} #view-order-tracking .ot-tracking-status-filter{display:grid;gap:6px;padding:10px 14px;font-size:14px} #view-order-tracking .ot-tracking-status-filter select{min-height:38px;border:1px solid #d3e0dc;border-radius:8px;background:white;font:inherit} #view-order-tracking .ot-cancel-match{color:#ad342c;border:1px solid #e9b6b1;background:#fff5f3;font-size:14px} #view-order-tracking .ot-matched-list{display:grid;gap:12px} #view-order-tracking .ot-matched-card{display:grid;grid-template-columns:140px minmax(0,1fr);gap:18px;padding:18px;border:1px solid #dce9e6;border-radius:14px;background:#fff} #view-order-tracking .ot-matched-card h4{margin:0;font-size:16px} #view-order-tracking .ot-matched-card p{margin:8px 0;font-size:14px} #view-order-tracking .ot-matched-image img{width:140px;height:140px;object-fit:contain} #view-order-tracking .ot-matched-link{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:10px 0;font-size:14px} #view-order-tracking .ot-undo-summary{max-height:35vh;overflow:auto;padding:12px;margin:12px 0;background:#fff5ef;border:1px solid #efc5b3;border-radius:10px;font-size:14px} #view-order-tracking .ot-undo-summary p,#view-order-tracking .ot-dialog p,#view-order-tracking .ot-dialog label{font-size:14px} @media(max-width:600px){#view-order-tracking .ot-matched-card{grid-template-columns:80px minmax(0,1fr);gap:10px;padding:12px}#view-order-tracking .ot-matched-image img{width:80px;height:100px}} /* Keep the order and all of its matched receipt images in one comparison. */ #view-order-tracking .ot-linked-comparison{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;margin:20px 0} #view-order-tracking .ot-linked-order,#view-order-tracking .ot-linked-incoming{min-width:0;border:1px solid #cddfe5;border-radius:14px;background:#f6faff;overflow:hidden} #view-order-tracking .ot-linked-incoming{border-color:#c8e3d9;background:#f3faf7} #view-order-tracking .ot-linked-order>header,#view-order-tracking .ot-linked-incoming>header{display:grid;gap:4px;padding:14px 16px;border-bottom:1px solid #dbe7eb} #view-order-tracking .ot-linked-comparison header strong{font-size:16px;color:#244745} #view-order-tracking .ot-linked-comparison header small,#view-order-tracking .ot-linked-comparison header span{font-size:14px;color:#567875} #view-order-tracking .ot-linked-photo{margin:12px;padding:8px;display:grid;place-items:center;border-radius:10px;background:white;border:1px solid #e1ebe8;min-height:260px} #view-order-tracking .ot-linked-photo img{width:100%;height:clamp(280px,33vw,460px);object-fit:contain} #view-order-tracking .ot-linked-photo .ot-image-placeholder{width:100%;min-height:280px} #view-order-tracking .ot-linked-order-info,#view-order-tracking .ot-linked-receipt-info{display:grid;gap:8px;padding:0 16px 16px;font-size:14px} #view-order-tracking .ot-linked-order-info>strong,#view-order-tracking .ot-linked-receipt-info>strong{font-size:16px} #view-order-tracking .ot-linked-order-info>.ot-legacy-items{margin:0} #view-order-tracking .ot-linked-order-info>.ot-button{justify-self:start} #view-order-tracking .ot-linked-receipts{display:grid;gap:12px;padding:12px} #view-order-tracking .ot-linked-receipt{border:1px solid #d3e7df;border-radius:11px;background:#fff;overflow:hidden} #view-order-tracking .ot-linked-receipt-heading{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;padding:12px 14px;background:#e9f5f0;font-size:14px} #view-order-tracking .ot-linked-quantity{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:10px;border-radius:8px;background:#e9f5f0;color:#176d5e} #view-order-tracking .ot-linked-quantity b{font-size:18px} #view-order-tracking .ot-linked-receipt-info .ot-cancel-match{justify-self:start} @media(max-width:1050px){#view-order-tracking .ot-orders-workbench{grid-template-columns:minmax(230px,290px) minmax(0,1fr)}#view-order-tracking .ot-linked-comparison{gap:10px}#view-order-tracking .ot-linked-photo{margin:8px;padding:4px;min-height:200px}#view-order-tracking .ot-linked-photo img{height:260px}} @media(max-width:740px){#view-order-tracking .ot-orders-workbench{grid-template-columns:1fr}#view-order-tracking .ot-linked-comparison{grid-template-columns:1fr}#view-order-tracking .ot-linked-photo img{height:330px}} @media(min-width:741px){#view-order-tracking .ot-orders-workbench>.ot-list-panel{position:sticky;top:12px;height:clamp(1250px,175dvh,1900px);min-height:390px}} @media(max-width:740px){#view-order-tracking .ot-orders-workbench>.ot-list-panel{height:880px;min-height:0;max-height:none}} #view-order-tracking .ot-order-list .ot-order-card{margin-bottom:10px} /* Compact list cards: full-height image at left, all metadata at right. */ #view-order-tracking .ot-order-card.ot-order-card-compact{grid-template-columns:minmax(95px,40%) minmax(0,1fr);min-height:150px;gap:0;padding:0} #view-order-tracking .ot-order-card-compact>.ot-order-thumb{position:relative;align-self:stretch;width:100%;height:auto;min-height:150px;margin:0;padding:0;border:0;border-right:1px solid #dce9e5;border-radius:0;background:white;overflow:hidden} #view-order-tracking .ot-order-card-compact>.ot-order-thumb img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center} #view-order-tracking .ot-order-card-compact>.ot-order-card-content{display:grid;align-content:center;gap:5px;padding:8px 9px} #view-order-tracking .ot-order-card-compact .ot-order-card-band{min-height:0;flex-direction:row;justify-content:space-between;gap:6px;margin:0;padding:4px 6px;border:0;border-radius:5px} #view-order-tracking .ot-order-card-compact .ot-order-card-band strong{font-size:18px;line-height:1.2;letter-spacing:0} #view-order-tracking .ot-order-card-compact .ot-order-card-band small{font-size:12px;white-space:nowrap} #view-order-tracking .ot-order-card-compact .ot-order-card-top{display:grid;grid-template-columns:minmax(0,1fr);gap:3px} #view-order-tracking .ot-order-card-compact .ot-order-card-top>strong{font-size:14px;white-space:normal;overflow-wrap:anywhere} #view-order-tracking .ot-order-card-compact .ot-status{justify-self:start;font-size:12px;line-height:1.3;padding:3px 6px;white-space:normal} #view-order-tracking .ot-order-card-compact .ot-legacy-items{margin:0;padding:5px 6px;gap:2px;font-size:14px;line-height:1.35} #view-order-tracking .ot-order-card-compact .ot-legacy-items strong{display:none} #view-order-tracking .ot-order-card-compact .ot-order-card-bottom{gap:2px 6px} #view-order-tracking .ot-order-card-compact .ot-order-card-bottom b{font-size:14px} #view-order-tracking .ot-order-card-compact .ot-order-card-bottom b small{font-size:12px} #view-order-tracking .ot-orders-workbench>.ot-list-panel>.ot-list-heading,#view-order-tracking .ot-orders-workbench>.ot-list-panel>.ot-search,#view-order-tracking .ot-orders-workbench>.ot-list-panel>.ot-tracking-status-filter{flex:none} #view-order-tracking .ot-orders-workbench .ot-order-list{display:flex;flex-direction:column;align-items:stretch;gap:10px;flex:1 1 0;height:0;min-height:0;overflow-y:auto} #view-order-tracking .ot-orders-workbench .ot-order-list>.ot-order-card{flex:0 0 auto;min-height:150px;margin:0} /* Clear totals, compact source review and distinct selectable order cards. */ #view-order-tracking .ot-source-review{border:1px solid #e8c879;border-radius:8px;background:#fff9eb;margin:6px 0;color:#704f14;font-size:14px} #view-order-tracking .ot-source-review summary{cursor:pointer;padding:8px 10px;font-weight:700} #view-order-tracking .ot-source-review summary span{font-weight:400;margin-left:8px} #view-order-tracking .ot-source-diffs{display:grid;gap:8px;padding:10px;border-top:1px solid #eed8a6} #view-order-tracking .ot-source-diff{display:grid;grid-template-columns:100px minmax(0,1fr);gap:8px;overflow-wrap:anywhere} #view-order-tracking .ot-source-images{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:6px;align-items:center;text-align:center} #view-order-tracking .ot-source-images figure{margin:0;min-width:0} #view-order-tracking .ot-source-images img{height:120px;width:100%;object-fit:contain} #view-order-tracking .ot-source-diffs>.ot-button{justify-self:start} #view-order-tracking .ot-source-diffs>small{font-size:13px} #view-order-tracking .ot-match-reason{font-size:14px} #view-order-tracking .ot-match-reason>.ot-link-button{justify-self:start;font-size:14px;padding:3px 0;min-height:30px;text-decoration:underline} #view-order-tracking .ot-order-above-photo{display:block;font-size:14px;color:#355874;margin-top:3px;overflow-wrap:anywhere} #view-order-tracking .ot-match-workbench .ot-compare-card-heading{padding:7px 9px;gap:5px;align-items:start} #view-order-tracking .ot-match-workbench .ot-compare-card-heading strong{font-size:16px} #view-order-tracking .ot-match-workbench .ot-detail-heading{margin-bottom:6px;padding-bottom:6px} #view-order-tracking .ot-match-workbench .ot-compare-order>.ot-text-action{font-size:14px;padding:4px 9px;min-height:28px} #view-order-tracking .ot-variance{align-items:center;justify-content:space-between} #view-order-tracking .ot-difference{padding:4px 8px;border-radius:6px;font-size:17px} #view-order-tracking .ot-difference.is-over{background:#ffebe7;color:#ad3426} #view-order-tracking .ot-difference.is-short{background:#fff1ce;color:#865300} #view-order-tracking .ot-difference.is-exact{background:#e3f4ed;color:#126b51} #view-order-tracking .ot-total-check{font-size:14px} #view-order-tracking .ot-total-check strong{font-size:18px} #view-order-tracking .ot-order-card-compact .ot-order-card-band strong{font-size:20px} #view-order-tracking .ot-order-card-compact .ot-order-card-content{align-content:start;gap:3px} #view-order-tracking .ot-order-card-compact .ot-order-card-meta{font-size:14px;line-height:1.4;white-space:normal;overflow-wrap:anywhere} #view-order-tracking .ot-order-card-compact .ot-order-card-bottom{display:grid;margin-top:3px;border-top:1px solid #dbe6e3;padding-top:4px} #view-order-tracking .ot-order-card-compact .ot-order-card-bottom>b{font-size:16px;color:#8a5412} #view-order-tracking .ot-order-card-compact.is-selected{border:2px solid #168171;box-shadow:inset 0 0 0 1px #168171;background:#edf9f4} #view-order-tracking .ot-order-card-compact.is-selected .ot-order-card-band{background:#167b6c;color:white} #view-order-tracking .ot-kpi-button[aria-pressed="true"]{outline:2px solid #168171;outline-offset:-2px} #view-order-tracking .ot-kpi-button strong small{font-size:14px;font-weight:500} @media(max-width:600px){#view-order-tracking .ot-source-diff{grid-template-columns:1fr}#view-order-tracking .ot-source-review summary span{display:block;margin-left:0}} /* Review changed values without expanding an image comparison by default. */ #view-order-tracking .ot-source-review summary{padding:6px 9px;line-height:1.4} #view-order-tracking .ot-source-diffs{gap:6px;padding:8px 10px} #view-order-tracking .ot-source-table-wrap{overflow-x:auto} #view-order-tracking .ot-source-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px} #view-order-tracking .ot-source-table th,#view-order-tracking .ot-source-table td{text-align:left;vertical-align:top;padding:5px 8px;border-bottom:1px solid #efdfba;overflow-wrap:anywhere} #view-order-tracking .ot-source-table th{font-weight:600} #view-order-tracking .ot-source-table thead{background:#f5e9cb;color:#66460d} #view-order-tracking .ot-source-table td:last-child{color:#765000;background:#fff3d8} #view-order-tracking .ot-source-photo-review{font-size:14px} #view-order-tracking .ot-source-photo-review summary{padding:3px 0;font-weight:500;text-decoration:underline} #view-order-tracking .ot-source-images{max-width:420px;margin:6px auto;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)} #view-order-tracking .ot-source-images .ot-image-open{display:block;width:100%;padding:0;border:0;background:transparent;position:relative} #view-order-tracking .ot-source-images .ot-image-open>img{display:block;width:100%;height:100px;object-fit:contain} #view-order-tracking .ot-source-images .ot-image-open>span{position:absolute;right:3px;bottom:3px;max-width:100%;font-size:12px;padding:2px 5px} #view-order-tracking .ot-source-review-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap} #view-order-tracking .ot-source-review-footer small{font-size:13px} #view-order-tracking .ot-source-review-footer .ot-button{min-height:32px;padding:4px 9px;font-size:14px} /* Full order sheet inside a compact fixed-height thumbnail, with metadata beside it. */ #view-order-tracking .ot-order-card.ot-order-card-compact{grid-template-columns:minmax(90px,34%) minmax(0,1fr);min-height:144px} #view-order-tracking .ot-order-card-compact>.ot-order-thumb{min-height:144px} #view-order-tracking .ot-order-card-compact>.ot-order-thumb img{object-fit:contain;object-position:center} #view-order-tracking .ot-order-card-compact>.ot-order-card-content{padding:6px 8px;gap:3px;align-content:center} #view-order-tracking .ot-order-card-compact .ot-order-card-band{padding:3px 6px;min-height:26px} #view-order-tracking .ot-order-card-compact .ot-order-card-band strong{font-size:18px} #view-order-tracking .ot-order-card-compact .ot-order-card-top{display:flex;flex-wrap:wrap;gap:3px 6px;align-items:center} #view-order-tracking .ot-order-card-compact .ot-order-card-meta{font-size:13px;line-height:1.4} #view-order-tracking .ot-order-card-compact .ot-order-card-bottom{display:flex;flex-wrap:wrap;gap:3px 8px;margin-top:1px;padding-top:3px} #view-order-tracking .ot-order-card-compact .ot-order-card-bottom>b{font-size:14px} #view-order-tracking .ot-order-card-compact .ot-order-card-bottom>small{font-size:12px} #view-order-tracking .ot-order-card-compact .ot-order-card-band small{font-size:12px} #view-order-tracking .ot-order-card-compact.is-selected{border-width:2px} .ot-pagination{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 8px;font-size:13px;border-top:1px solid #dce5e2}.ot-pagination span{text-align:center}.ot-pagination button{white-space:nowrap} #view-order-tracking .ot-pattern-comparison{display:block;width:fit-content;padding:3px 7px;border-radius:5px;font-size:12px;font-weight:800;line-height:1.5;background:#edf1f5;color:#4b5563} #view-order-tracking .ot-pattern-comparison.is-matching{background:#dcfce7;color:#166534} #view-order-tracking .ot-pattern-comparison.is-different{background:#ffedd5;color:#9a3412} #view-order-tracking .ot-pattern-comparison-codes{display:block;color:#52616d;overflow-wrap:anywhere;font-size:12px;line-height:1.5} #view-order-tracking .ot-pattern-review{display:grid;gap:8px;margin:10px 0 14px;padding:10px 12px;border:1px solid #dce5ea;border-radius:8px;background:#f8fafc} /* Keep page navigation visible beneath the taller matching lists. */ #view-order-tracking .ot-match-workbench .ot-pagination{flex:none} #view-order-tracking .ot-photo-recovery{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:12px 0;padding:14px 16px;border:1px solid #bcded4;border-radius:12px;background:#effaf6;color:#155e50} #view-order-tracking .ot-photo-recovery div{display:grid;gap:4px;flex:1;min-width:220px} #view-order-tracking .ot-photo-recovery span{font-size:13px} #view-order-tracking .ot-photo-recovery progress{width:180px;max-width:100%;accent-color:#168477} /* Receiving stages distinguish missing quantities from confirmed zero. */ #view-order-tracking .ot-status-in-transit{background:#e9f3ff;color:#195fa2;border-color:#b8d9f8} #view-order-tracking .ot-status-awaiting-confirmation{background:#fff5dc;color:#8a5c0b;border-color:#eed39a} #view-order-tracking .ot-receipt-filters button[data-receipt-filter="in-transit"]{background:#edf5ff;color:#195fa2;box-shadow:inset 0 0 0 1px #c6def6} #view-order-tracking .ot-receipt-filters button[data-receipt-filter="in-transit"].is-active{background:#195fa2;color:#fff} #view-order-tracking .ot-receipt-qty .ot-quantity-unset{font-size:12px;line-height:1.45;white-space:normal;max-width:104px;display:block} #view-order-tracking .ot-order-summary .ot-quantity-unset{font-size:17px;line-height:1.5} #view-order-tracking .ot-order-receiving-hint{grid-column:1/-1;color:#195fa2;font-size:11px;white-space:normal} #view-order-tracking .ot-receipt-filters button[data-receipt-filter="awaiting-confirmation"]{background:#fff7e5;color:#8a5c0b;box-shadow:inset 0 0 0 1px #eed39a} #view-order-tracking .ot-receipt-filters button[data-receipt-filter="awaiting-confirmation"].is-active{background:#8a5c0b;color:#fff} /* Give every bill sidebar the same usable scroll space, including receipt lists on phones. */ #view-order-tracking .ot-list-panel>.ot-list-heading,#view-order-tracking .ot-list-panel>.ot-search,#view-order-tracking .ot-list-panel>.ot-receipt-filters,#view-order-tracking .ot-list-panel>.ot-pagination{flex:none} #view-order-tracking .ot-list-panel>.ot-receipt-list,#view-order-tracking .ot-list-panel>.ot-order-list{flex:1 1 0;min-height:0;max-height:none} @media(min-width:741px) and (max-width:1180px){#view-order-tracking .ot-orders-workbench>.ot-list-panel{height:1100px}} #view-order-tracking .ot-area-loading{min-height:130px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:9px;padding:32px 16px;color:#536e69;text-align:center;grid-column:1/-1}#view-order-tracking .ot-area-loading strong{font-size:14px;color:#284c46}#view-order-tracking .ot-area-loading small{font-size:12px;color:#637d77}#view-order-tracking .ot-detail-panel>.ot-area-loading{min-height:260px;background:#fff;border:1px solid var(--ot-line);border-radius:15px;justify-content:center}#view-order-tracking .ot-receipt-list>.ot-area-loading,#view-order-tracking .ot-order-list>.ot-area-loading,#view-order-tracking .ot-order-candidates>.ot-area-loading{width:100%;box-sizing:border-box} @media(prefers-reduced-motion:reduce){#view-order-tracking .ot-area-loading .ot-spinner{animation:none}} #view-order-tracking .ot-receipt-thumb:has(img[data-ot-image]:not([data-ot-loaded])),#view-order-tracking .ot-order-thumb:has(img[data-ot-image]:not([data-ot-loaded])),#view-order-tracking .ot-image-open:has(img[data-ot-image]:not([data-ot-loaded])),#view-order-tracking .ot-pending-photo:has(img[data-ot-image]:not([data-ot-loaded])){position:relative} #view-order-tracking .ot-receipt-thumb:has(img[data-ot-image]:not([data-ot-loaded]))::after,#view-order-tracking .ot-order-thumb:has(img[data-ot-image]:not([data-ot-loaded]))::after,#view-order-tracking .ot-image-open:has(img[data-ot-image]:not([data-ot-loaded]))::after,#view-order-tracking .ot-pending-photo:has(img[data-ot-image]:not([data-ot-loaded]))::after{content:'กำลังโหลดรูป…';position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:3px;background:#edf4f1;color:#4c6960;font-size:11px;line-height:1.3;pointer-events:none}