.workOrderDialog{width:min(760px,calc(100vw - 24px));max-width:760px;max-height:calc(100dvh - 36px);padding:0;border:1px solid #d9dde1;border-radius:8px;background:#fff;color:#303840;font:15px/1.5 system-ui;overflow:auto}.workOrderDialog::backdrop{background:#17202970}.workOrderDialog>header{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#343b42;color:white;padding:14px 18px;position:sticky;top:0;z-index:1}.workOrderDialog h2{font-size:19px;margin:0}.workOrderDialog>header .btn{color:white;background:transparent;border-color:#78818a}.workOrderDialog>main{padding:18px}.workOrderDialog p{white-space:pre-wrap;overflow-wrap:anywhere;margin:9px 0}.workOrderDialog h3{margin:12px 0;font-size:19px}.workOrderDialog h4{margin:0;font-size:16px}.workOrderArea{border:1px solid #dde0e4;border-radius:6px;padding:14px;margin-top:16px}.workOrderItem{border-top:1px solid #e6e9ec;padding:12px 0}.workOrderDialog figure{margin:14px 0}.workOrderPhoto{position:relative;line-height:0}.workOrderPhoto img{width:100%;height:auto;border-radius:6px}.workOrderPhoto canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#jobDocuments{max-width:420px}#jobDocuments main{display:flex;flex-direction:column;gap:12px}

.workOrderExport{margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid #dde0e4}.workOrderExport>div{display:flex;flex-wrap:wrap;gap:8px}.workOrderExport .btn{flex:1 1 auto;min-height:44px}.workOrderExport [role=status]{font-size:12px;color:#626c75}

.crewNotes{border:1px solid #dde0e4;border-radius:6px;background:#f6f7f8;padding:0;margin-top:16px;overflow:hidden}.crewNotesHeading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 14px;border-bottom:1px solid #dde0e4;background:#f6f7f8;color:#303840}.workOrderDialog .crewNotes>p{margin:12px 14px}.crewNotes>div:not(.crewNotesHeading){padding:0 14px 12px}.workOrderArea>.crewNotes{margin-left:-15px;margin-right:-15px;margin-bottom:-15px}.crewNotesEdit{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:transparent;color:#626c75;border-radius:6px;cursor:pointer}.crewNotesEdit:disabled{opacity:.4;cursor:default}.crewNotesPlaceholder{color:#707780}.crewNotes textarea{display:block;box-sizing:border-box;width:100%;font:inherit;font-size:16px;color:inherit;background:white;border:1px solid #bcc3ca;border-radius:6px;padding:10px;resize:vertical;margin-top:10px}.crewNotesActions{display:flex;gap:8px;margin-top:10px}.crewNotesActions .btn{min-height:44px}.crewNotes [role=status]{font-size:13px}

.workOrderArea:not([data-materials-summary]){margin-top:28px}.workOrderArea>h3:first-child{margin-top:0;margin-bottom:6px}.workOrderArea>h3+.workOrderItem{padding-top:6px}

.workOrderBrand{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #dde0e4;padding-bottom:16px;margin-bottom:18px}.workOrderBrand h3{font-size:24px;margin:0;overflow-wrap:anywhere}.workOrderBrand img{max-width:120px;max-height:90px;object-fit:contain}


/* Keep the header below the iPhone cutout and scroll only the document body. */
.workOrderDialog{position:fixed;inset:calc(env(safe-area-inset-top,0px) + 12px) max(12px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 12px) max(12px,env(safe-area-inset-left,0px));margin:auto;width:min(760px,calc(100% - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 24px);box-sizing:border-box;overflow:hidden;overscroll-behavior:none}
.workOrderDialog[open]{display:flex;flex-direction:column}
.workOrderDialog>header{position:relative;flex:0 0 auto}
.workOrderDialog>main{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* Match estimate cards to the compact directory layout, including accepted actions. */
html body #savedEstimateList .compactEstimateCard{padding:0}
html body #savedEstimateList .estimateStageSection .directoryCardFooter{flex-wrap:nowrap}
html body #savedEstimateList .directoryCardFooter>span{flex:1 1 0;min-width:0}
.workOrderDialog>header{gap:8px;padding:10px 12px}
.workOrderDialog>header h2{margin-right:auto;min-width:0}
.workOrderHeaderActions{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.workOrderDialog>header .workOrderHeaderActions .btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;width:44px;height:44px;min-height:44px;padding:0!important;border:0!important;background:transparent!important;color:#fff;box-shadow:none!important}
.workOrderHeaderActions .btn:disabled{opacity:.4}
.workOrderHeaderActions .btn:focus-visible{outline:2px solid white;outline-offset:-3px}
.workOrderDialog>header>button{flex:0 0 auto}
.workOrderExport{margin-bottom:12px;padding-bottom:0;border:0}

/* Header actions override shared filled-button styling. */
html body #workOrderDialog>header .workOrderHeaderActions .btn,
html body #workOrderDialog>header .workOrderHeaderActions .btn:hover,
html body #workOrderDialog>header .workOrderHeaderActions .btn:active{appearance:none;-webkit-appearance:none;background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;color:inherit!important;padding:0!important}
html body #workOrderDialog>header .workOrderHeaderActions svg{width:27px;height:27px;stroke:currentColor}

/* Shared X close action: visual size 27px with a 44px touch target. */
html body button.pqpCloseIcon:is(#signedQuoteClose,#closeQ,.pqpCloseIcon),
html body button.pqpCloseIcon:is(#signedQuoteClose,#closeQ,.pqpCloseIcon):hover,
html body button.pqpCloseIcon:is(#signedQuoteClose,#closeQ,.pqpCloseIcon):active{display:inline-flex!important;align-items:center!important;justify-content:center!important;appearance:none;-webkit-appearance:none;flex:0 0 44px!important;width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;border:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;color:inherit!important;cursor:pointer}
html body button.pqpCloseIcon svg{width:27px;height:27px;pointer-events:none;stroke:currentColor}
html body button.pqpCloseIcon:focus-visible{outline:2px solid currentColor!important;outline-offset:-4px}

/* Approved work-order layout: a quiet document with area and job time targets. */
#workOrderDialog{font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#252d33;background:#fff}
#workOrderDialog>header{padding:10px 16px;background:#343b42}
#workOrderDialog>header h2{font-size:22px;font-weight:650}
#workOrderDialog>main{padding:20px 16px 24px}
#workOrderDialog .workOrderExport:has([role=status]:empty){display:none}
#workOrderDialog .workOrderBrand{border:0;padding:0;margin:0 0 12px;gap:12px}
#workOrderDialog .workOrderBrand h3{font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#58616a}
#workOrderDialog .workOrderIdentity h3{font-size:26px;line-height:1.2;letter-spacing:-.5px;margin:0 0 4px;font-weight:650}
#workOrderDialog .workOrderIdentity p{margin:3px 0;font-size:17px}
#workOrderDialog .workOrderIdentity p:last-child{font-size:14px;color:#7b828b}
#workOrderDialog .workOrderHoursTotal{display:flex;align-items:center;justify-content:space-between;gap:12px;border-block:1px solid #dde0e4;padding:14px 0;margin:20px 0 16px;font-size:17px}
#workOrderDialog .workOrderHoursTotal strong{font-weight:650}
#workOrderDialog .workOrderHoursTotal strong:last-child{white-space:nowrap}
#workOrderDialog [data-materials-summary]{border:0;padding:0;margin:20px 0 28px}
#workOrderDialog [data-materials-summary] h3{margin:0 0 6px;font-size:18px}
#workOrderDialog [data-materials-summary] p{margin:2px 0;color:#58616a}
#workOrderDialog [data-materials-summary] strong{font-weight:400}
#workOrderDialog .workOrderScopeTitle{font-size:18px;margin:24px 0 10px}
#workOrderDialog .workOrderArea:not([data-materials-summary]){border:1px solid #cbd0d6;border-radius:6px;padding:12px;margin:0 0 12px}
#workOrderDialog .workOrderAreaHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #dde0e4;padding:0 0 10px;margin:0 0 8px}
#workOrderDialog .workOrderAreaHeader h3{font-size:21px;line-height:1.2;margin:0;min-width:0;overflow-wrap:anywhere;font-weight:650}
#workOrderDialog .workOrderAreaHours{flex:0 0 auto;text-align:right;line-height:1.35}
#workOrderDialog .workOrderAreaHours span{display:block;font-size:12px;color:#747c84}
#workOrderDialog .workOrderAreaHours strong{display:block;font-size:17px;font-weight:650}
#workOrderDialog .workOrderItem{border:0;padding:6px 0}
#workOrderDialog .workOrderItem h4{font-size:16px;font-weight:650}
#workOrderDialog .workOrderItem p{margin:2px 0;color:#626c75;font-size:14px}
#workOrderDialog .workOrderItem p strong{font-weight:400}
#workOrderDialog .crewNotes{border:0;border-radius:5px;margin:12px 0 0;background:#f2f4f6}
#workOrderDialog .crewNotesHeading{border:0;background:transparent;padding:8px 10px 0;min-height:0;color:#747c84}
#workOrderDialog .crewNotesHeading h4{font-size:13px;font-weight:500}
#workOrderDialog .crewNotes>p{margin:3px 10px 10px;font-size:14px}
@media(max-width:360px){#workOrderDialog .workOrderHoursTotal{font-size:15px}#workOrderDialog .workOrderAreaHeader h3{font-size:19px}}

@media(max-width:760px){
 #workOrderDialog{inset:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);margin:0;width:100%;max-width:none;height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));border:0;border-radius:0}
}
/* Preserve the approved white document and small radii against global theme rules. */
html body #workOrderDialog,html body #workOrderDialog>main{background:#fff!important;color:#252d33!important}
html body #workOrderDialog .workOrderArea:not([data-materials-summary]){background:#fff!important;border-radius:6px!important}
html body #workOrderDialog .crewNotes{background:#f2f4f6!important;border-radius:5px!important}
@media(max-width:760px){html body #workOrderDialog{border-radius:0!important}}

/* App-wide neutral interaction feedback: no browser-blue tap rectangles. */
html body,html body *{-webkit-tap-highlight-color:transparent!important}
html body :is(button,a,[role="button"],[tabindex],summary,input,select,textarea):focus:not(:focus-visible){outline:none!important;box-shadow:none!important}
html body :is(button,a,[role="button"],[tabindex],summary,input,select,textarea):focus-visible{outline:none!important;outline-offset:0!important;box-shadow:none!important;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:4px}
html body input:focus,html body select:focus,html body textarea:focus{outline:none!important;box-shadow:none!important}

/* No focus rectangles, including card and dialog targets. */
html body :focus{outline:none!important;box-shadow:none!important}

/* Mobile: suppress keyboard focus decoration while retaining desktop feedback. */
@media(max-width:760px),(hover:none) and (pointer:coarse){
html body :is(button,a,[role="button"],[tabindex],summary,input,select,textarea):focus-visible,html body button.pqpCloseIcon:is(#signedQuoteClose,#closeQ,.pqpCloseIcon):focus-visible{outline:none!important;box-shadow:none!important;text-decoration:none!important}
}


/* Per-area crew materials: compact on screen, complete in print. */
#workOrderDialog .workOrderMaterials{margin:12px 0;border-top:1px solid #dde0e4;padding-top:8px}
#workOrderDialog .workOrderMaterials>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;min-height:40px}
#workOrderDialog .workOrderMaterials>summary::-webkit-details-marker{display:none}
#workOrderDialog .workOrderMaterials>summary::after{content:'';width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(225deg);margin-right:4px}
#workOrderDialog .workOrderMaterials[open]>summary::after{transform:rotate(45deg)}
#workOrderDialog .workOrderMaterials h4{font-size:15px;font-weight:650;margin:0}
#workOrderDialog .workOrderMaterialRows p{margin:5px 0;color:#626c75;font-size:14px;overflow-wrap:anywhere}
#workOrderDialog .workOrderMaterialRows strong{font-weight:500}
@media print{#workOrderDialog .workOrderMaterials>summary::after{display:none}#workOrderDialog .workOrderMaterials>summary{min-height:0;margin-bottom:6px}#workOrderDialog .workOrderMaterialRows{display:block!important}}


/* Also cover the standalone crew work-order page. */
html body .workOrderDialog .btn{border-radius:6px!important}