body:has(#orders.on){padding:12px 16px}
body:has(#orders.on) #message{font-size:11px;margin:0 0 7px}
#message:empty{display:none}
#orders .order-page-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}
#orders h1{font-size:21px;margin:0;letter-spacing:-.5px}
#orderTotalCount{font-size:12px;font-weight:400;color:#718399;margin-left:8px;letter-spacing:0}
.order-heading-actions,.order-list-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
#orders input:not([type=checkbox]),#orders select,#orders button{min-height:32px;padding:6px 10px;font-size:12px}
.order-filter-panel{background:#fff;border:1px solid #dbe4ee;border-radius:6px;padding:10px 12px}
#orders .order-filter-row{margin:0;gap:7px;align-items:center}
#orders .order-filter-row+.order-filter-row{border-top:1px solid #e7edf4;padding-top:9px;margin-top:9px}
#orders .order-filter-row label:not(.order-sr-only){display:flex;align-items:center;gap:6px;margin:0;color:#6b8096;font-size:12px}
#orders .order-filter-row input,#orders .order-filter-row select{display:inline-block;margin:0;min-width:0}
#orderDateField{width:92px}
#orderDateFrom,#orderDateTo{width:133px}
#orderCarFilter,#orderDeliveryFilter{width:145px}
#orders #orderSearch{width:auto;flex:1 1 260px;min-width:150px}
.order-period-buttons{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-left:auto}
#orders .order-period-buttons button{font-size:11px;padding:5px 8px;min-height:29px;background:#f8fafd}
#orders .order-reset{border-color:transparent;color:#708399}
.order-list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 1px}
#orders #orderSummary{font-size:11px;color:#6b8096;line-height:1.6;margin:0;display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap}
#orderSummary b{font-size:12px;color:#214564}
.order-record-count{white-space:nowrap}
.order-summary-values{display:flex;gap:12px;flex-wrap:wrap}
.order-list-actions{margin-left:auto}
#orders .order-list-actions select,#orders .order-list-actions button{font-size:11px;min-height:28px;padding:4px 7px;width:auto}
#orders #orderList{max-height:calc(100vh - 235px);background:#fff;border:1px solid #dbe4ee;border-radius:6px;overscroll-behavior:contain}
#orderList table{min-width:1260px;font-size:11px}
#orderList th{background:#f1f5fa;color:#60778f;padding:8px;border-left:0;border-right:0}
#orderList td{padding:6px 8px;height:36px;white-space:nowrap;border-left:0;border-right:0;border-color:#e5ecf3}
#orderList td:nth-child(6){white-space:normal;min-width:130px;max-width:240px}
#orderList th:first-child,#orderList td:first-child{width:32px;text-align:center}
#orderList tr:last-child td{border-bottom:0}
#orderList tbody tr:hover{background:#f7faff}
#orders #orderList .order-sort{min-height:0;padding:0;font-size:11px;font-weight:700;white-space:nowrap}
#orders #orderList td button{min-height:25px;font-size:11px;padding:3px 7px}
#orderList td:nth-child(10),#orderList td:nth-child(11),#orderList td:nth-child(12){text-align:right;font-variant-numeric:tabular-nums}
#orderList td:last-child{white-space:nowrap}
#orders #orderPager{font-size:11px;gap:5px;margin:10px 0 0;align-items:center}
#orders #orderPager button{min-height:28px;font-size:11px;padding:4px 8px}
#orders #orderPager label{display:flex;gap:6px;align-items:center;margin:0 0 0 auto;font-size:11px;color:#708399}
#orders #orderPager input{min-height:28px;font-size:11px;padding:4px 6px}
.order-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}
dialog.order-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(550px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;padding:0;border:0;border-left:1px solid #dbe4ee;background:#fff;color:#163953;box-shadow:-8px 0 30px #17395822;overflow:hidden}
dialog.order-drawer[open]{display:flex;flex-direction:column}
dialog.order-drawer::backdrop{background:#17395855}
dialog.order-upload-drawer{width:min(780px,100vw)}
dialog#orderUploadDialog.order-upload-drawer{inset:0;margin:auto;width:min(1120px,94vw);max-width:94vw;height:fit-content;max-height:90dvh;border:1px solid #d3dfec;border-radius:10px;box-shadow:0 16px 55px #17395844}
#orderUploadDialog .order-drawer-heading{padding:14px 18px}
#orderUploadDialog .order-drawer-body{padding:14px 18px;max-height:calc(90dvh - 82px)}
#orderUploadDialog #uploadPreview{max-height:min(56dvh,520px)}
.order-drawer-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;padding:18px 20px;border-bottom:1px solid #dbe4ee;flex-shrink:0;background:#fff}
#orders .order-drawer-heading h2{font-size:18px;margin:0}
.order-drawer-heading p{font-size:11px;color:#708399;line-height:1.6;margin:7px 0 0}
.order-drawer-heading>button{flex-shrink:0}
.order-drawer-body{padding:18px 20px;overflow:auto;min-height:0;flex:1}
.order-drawer-notice{font-size:12px;line-height:1.6;margin:0 0 14px}
.order-drawer-notice:empty{display:none}
#orders .order-drawer .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 12px}
#orders .order-drawer label{font-size:12px;margin-bottom:5px}
#orders .order-drawer .grid input,#orders .order-drawer .grid select{width:100%;min-width:0}
#orders .order-drawer .tools{margin:15px 0 0;gap:7px;align-items:center}
#orders .order-upload-tools{display:flex;flex-wrap:wrap}
#orders #uploadFile{flex:1 1 100%;width:100%;min-width:0;padding:7px 9px;min-height:40px;background:#f8fafd}
#uploadFile::file-selector-button{font:inherit;border:0;border-radius:3px;background:#eaf2fc;color:#1257a0;padding:5px 9px;margin-right:8px;cursor:pointer}
#orders #autoMapSummary,#orders #uploadStatus{margin:12px 0 0;font-size:12px;line-height:1.7;overflow-wrap:anywhere}
#autoMapSummary:empty,#uploadStatus:empty,#uploadPreview:empty{display:none}
#orders #manualMapping{margin-top:13px}
#uploadPreview{max-height:48vh;margin-top:12px;border:1px solid #e0e9f1;border-radius:5px}
#uploadPreview table{min-width:760px}
#uploadPreview th{position:sticky;top:0;z-index:1}
@media(max-width:950px){.order-period-buttons{margin-left:0}#orders #orderList{max-height:56vh}}
@media(max-width:550px){body:has(#orders.on){padding:12px}#orders .order-page-heading{align-items:flex-start;gap:10px}#orders h1{font-size:19px}.order-filter-panel{padding:9px}#orders .order-filter-row{gap:6px}#orders #orderDateFrom,#orders #orderDateTo{width:128px;flex:1 1 120px}#orders #orderCarFilter,#orders #orderDeliveryFilter{flex:1 1 120px;width:auto}#orders #orderSearch{flex-basis:100%}#orderTotalCount{font-size:11px}.order-list-toolbar{gap:8px}.order-list-actions{margin-left:0}.order-summary-values{gap:7px}.order-drawer-heading{padding:15px}.order-drawer-body{padding:15px}}

#orders .order-delivery-toggle{white-space:nowrap}
#orders .order-delivery-toggle[aria-pressed="true"]{background:#126fd8;color:#fff;border-color:#126fd8}

.wk-open-qty{color:#c62828!important;font-weight:700!important}

#orders #orderSort{width:170px;flex:0 0 170px}
