:root{--navy:#0b3152;--navy2:#164f75;--cyan:#25a7c7;--ink:#142331;--muted:#647583;--line:#dce4e9;--wash:#f4f7f9;--white:#fff;--amber:#e69512;--red:#bd3434;--green:#18704a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--wash);color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif}.topbar{height:72px;background:var(--navy);color:white;display:flex;align-items:center;padding:0 28px;box-shadow:0 2px 8px #08263f40;position:sticky;top:0;z-index:20}.brand{color:white;text-decoration:none;display:flex;gap:12px;align-items:center;min-width:270px}.brand-mark{width:40px;height:40px;border:2px solid var(--cyan);border-radius:6px;display:grid;place-items:center;font-weight:800;letter-spacing:-1px}.brand strong,.brand small{display:block}.brand strong{font-size:15px;letter-spacing:.03em}.brand small{font-size:11px;color:#a9c5d7;text-transform:uppercase;letter-spacing:.14em;margin-top:2px}nav{display:flex;height:100%;gap:6px}.nav-button{border:0;background:transparent;color:#bcd0dd;font-size:14px;padding:0 18px;position:relative;cursor:pointer}.nav-button:hover{color:white}.nav-button.active{color:white;font-weight:700}.nav-button.active:after{content:"";height:3px;border-radius:3px 3px 0 0;background:var(--cyan);position:absolute;bottom:0;left:14px;right:14px}.top-actions{margin-left:auto;display:flex;align-items:center;gap:12px}.revision{color:#c1d2dc;border:1px solid #3d607a;border-radius:5px;padding:5px 8px;font-size:10px;font-weight:800;letter-spacing:.12em}.data-mode{font-size:11px;color:#c8d7e0;display:flex;align-items:center;gap:6px}.data-mode i{width:7px;height:7px;background:#8fb0c1;border-radius:50%}.data-mode.live i{background:#55cf9a;box-shadow:0 0 0 3px #55cf9a22}.data-mode.demo i{background:#f1b74c}main{padding:30px 32px 48px;max-width:1800px;margin:auto}.page{display:none}.page.active{display:block}.page-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}.eyebrow{font-size:10px;color:var(--cyan);font-weight:800;letter-spacing:.18em;margin:0 0 5px}.page-head h1{font-size:30px;line-height:1;margin:0}.page-head p:not(.eyebrow){margin:9px 0 0;color:var(--muted);font-size:14px}.refresh,.filter-button,.clear-button{border:1px solid #bdcbd4;background:white;color:var(--navy);border-radius:6px;padding:10px 14px;font-weight:650;cursor:pointer}.refresh{background:var(--navy);color:white;border-color:var(--navy)}.refresh:hover{background:var(--navy2)}.refresh span{font-size:16px}.refresh.loading span{display:inline-block;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}.search{height:42px;background:white;border:1px solid #becbd3;border-radius:6px;display:flex;align-items:center;gap:9px;padding:0 12px;min-width:min(460px,55vw)}.search:focus-within,.vendor-select-wrap:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px #25a7c71c}.search span,.vendor-select-wrap>span{font-size:22px;color:var(--muted)}.search input,.vendor-select-wrap input,.filter-panel input{border:0;outline:0;width:100%;font:inherit;color:var(--ink);background:transparent}.filter-button span{background:#dcebf1;color:var(--navy);padding:2px 6px;border-radius:10px;margin-left:5px}.clear-button{border-color:transparent;background:transparent;color:#527080}.result-count{color:var(--muted);font-size:13px;margin-left:auto}.filter-panel{display:grid;grid-template-columns:repeat(7,minmax(130px,1fr));gap:12px;background:#e9eff3;border:1px solid #d2dde3;border-radius:7px;padding:14px;margin:-4px 0 14px}.filter-panel label,.vendor-picker>label{font-size:10px;font-weight:800;letter-spacing:.06em;color:#536875;text-transform:uppercase}.filter-panel input{display:block;background:white;border:1px solid #c5d1d8;border-radius:5px;padding:9px;margin-top:6px;font-size:12px}.table-card{background:white;border:1px solid var(--line);border-radius:8px;box-shadow:0 2px 6px #15344d0a;overflow:hidden}.table-scroll{overflow:auto;max-height:calc(100vh - 245px)}table{width:100%;border-collapse:collapse;min-width:1500px}#ordersTable{min-width:1000px}th{position:sticky;top:0;background:#edf2f5;color:#526776;font-size:10px;letter-spacing:.08em;text-align:left;padding:12px 14px;border-bottom:1px solid #cfd9df;white-space:nowrap;cursor:pointer;z-index:2;user-select:none}th:after{content:"↕";font-size:10px;margin-left:7px;color:#96a6b0}th.sorted:after{content:attr(data-arrow);color:var(--cyan)}th.numeric{text-align:right}td{padding:14px;border-bottom:1px solid #e7ecef;font-size:13px;white-space:nowrap}tbody tr:hover{background:#f7fbfd}tbody tr:last-child td{border-bottom:0}td a{color:#087b9b;font-weight:700;text-decoration:none}td a:hover{text-decoration:underline}.number{text-align:right;font-variant-numeric:tabular-nums}.number.order{color:#116f8a;font-weight:700}.number.low{color:var(--red);font-weight:800}.location{background:#e9f2f5;color:#275166;border-radius:4px;padding:4px 7px;font-size:11px;font-weight:700}.muted{color:#9aa8b1}.status{display:inline-flex;align-items:center;border-radius:12px;padding:4px 8px;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.status.ordered,.status.new{background:#fff0cf;color:#815a0a}.status.shipped{background:#e2f2f7;color:#0e6178}.status.received{background:#e4f3eb;color:#176642}.status.archived,.status.cancelled{background:#edf0f2;color:#61717b}.tracking{display:flex;align-items:center;gap:9px}.carrier{font-size:9px;font-weight:800;color:#617481;border:1px solid #ced8de;border-radius:4px;padding:3px 5px;text-transform:uppercase}.empty{text-align:center;padding:55px 20px;color:var(--muted)}.empty span{font-size:32px}.empty h2{margin:8px 0 3px;color:var(--ink);font-size:18px}.empty p{margin:0;font-size:13px}.po-controls{display:flex;align-items:end;gap:22px;margin-bottom:16px}.vendor-picker{width:min(460px,55vw);position:relative}.vendor-select-wrap{height:42px;background:white;border:1px solid #becbd3;border-radius:6px;display:flex;align-items:center;gap:8px;padding:0 10px;margin-top:6px}.vendor-select-wrap button{border:0;background:transparent;font-size:21px;color:#788995;cursor:pointer}.vendor-options{position:absolute;z-index:10;top:66px;left:0;right:0;background:white;border:1px solid #c6d2d9;border-radius:6px;box-shadow:0 12px 30px #183e5b21;max-height:260px;overflow:auto}.vendor-option{width:100%;border:0;background:white;text-align:left;padding:11px 13px;cursor:pointer;color:var(--ink)}.vendor-option:hover,.vendor-option:focus{background:#edf6f9;outline:0}.vendor-option small{display:block;color:var(--muted);margin-top:2px}.order-scope{border:0;padding:0;margin:0;display:flex;gap:0}.order-scope legend{font-size:10px;font-weight:800;letter-spacing:.06em;color:#536875;text-transform:uppercase;margin-bottom:6px}.order-scope label input{position:absolute;opacity:0}.order-scope label span{display:block;background:white;border:1px solid #becbd3;padding:11px 14px;font-size:12px;font-weight:700;cursor:pointer}.order-scope label:first-of-type span{border-radius:6px 0 0 6px}.order-scope label:last-of-type span{border-radius:0 6px 6px 0;border-left:0}.order-scope input:checked+span{background:var(--navy);border-color:var(--navy);color:white}.tracking-note{font-size:11px;color:var(--muted);margin:10px 2px}.toast{position:fixed;right:22px;bottom:22px;transform:translateY(20px);opacity:0;pointer-events:none;background:#102f48;color:white;border-radius:6px;padding:12px 16px;box-shadow:0 10px 30px #00182935;font-size:13px;transition:.2s;z-index:50}.toast.show{opacity:1;transform:none}@media(max-width:1100px){.filter-panel{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.topbar{padding:0 14px}.brand{min-width:0}.brand span:last-child{display:none}nav{margin-left:8px}.nav-button{padding:0 8px;font-size:12px}.revision,.data-mode{display:none}main{padding:22px 14px}.page-head{align-items:center}.page-head p:not(.eyebrow){display:none}.refresh{padding:9px 11px;font-size:12px}.search{min-width:0;flex:1}.result-count{display:none}.filter-panel{grid-template-columns:1fr 1fr}.po-controls{align-items:stretch;flex-direction:column;gap:14px}.vendor-picker{width:100%}.table-scroll{max-height:calc(100vh - 225px)}}
