.officeReceiptDialog{width:min(1000px,calc(100% - 24px));max-height:92dvh;border:1px solid #cad5e1;border-radius:12px;padding:0;color:#18324c;background:#fff}.officeReceiptDialog::backdrop{background:#10213499}.officeReceiptDialog header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border-bottom:1px solid #dae3ed}.officeReceiptDialog h2{font-size:1.25rem;margin:0}.officeReceiptBody{padding:18px;font-size:1rem}.officeReceiptGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.officeReceiptBody label{display:block;margin:10px 0}.officeReceiptGrid input,.officeReceiptGrid select{width:100%;min-height:42px;box-sizing:border-box}.officeReceiptBody input[type=checkbox]{width:22px;height:22px;vertical-align:middle}.officeReceiptActions{display:flex;gap:16px;flex-wrap:wrap}.officeReceiptActions input{max-width:100%}.officeReceiptPreview img,.officeReceiptPreview canvas{max-width:100%;max-height:420px;object-fit:contain}.officeReceiptPreview a{display:block;margin:8px 0}.officeReceiptSummary:not(:empty),.officeReceiptCard{background:#f2f6fa;padding:16px;border:1px solid #d5e0eb;border-radius:8px;margin:16px 0}.officeReceiptBody .btn{margin:4px;min-height:42px;white-space:normal}.officeReceiptDocument{width:100%;height:65vh;object-fit:contain;border:0}.officeReceiptBody p{overflow-wrap:anywhere}@media(max-width:600px){.officeReceiptGrid{grid-template-columns:1fr}.officeReceiptDialog header{align-items:flex-start}.officeReceiptBody{padding:12px}}

.officeReceiptDialog{overflow:auto}.officeReceiptDialog > header{position:sticky;top:0;z-index:10;background:#fff}.officeReceiptDialog > header .btn{flex-shrink:0}

/* Keep the receipt actions in view while long previews scroll independently. */
@media screen {
 body dialog.officeReceiptDialog[open]{display:flex;flex-direction:column;overflow:hidden!important}
 .officeReceiptDialog>header{flex:0 0 auto;padding:12px 16px}
 .officeReceiptDialog>.officeReceiptBody{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px 16px;font-size:16px}
 .officeReceiptBody>p{margin:8px 0 12px}
 .officeReceiptGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px;align-items:end}
 .officeReceiptBody .officeReceiptGrid>label{margin:0;display:flex;flex-direction:column;gap:5px;font-size:14px}
 .officeReceiptGrid input,.officeReceiptGrid select{font:inherit;padding:8px;min-height:42px;border:1px solid #b7c9dc;border-radius:7px;background:#fff}
 .officeReceiptActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
 .officeReceiptActions>label{min-width:0;display:flex;flex-direction:column;gap:6px;margin:0;font-size:14px}
 .officeReceiptPreview img,.officeReceiptPreview canvas{max-height:32dvh}
 .officeReceiptSummary:not(:empty){margin:10px 0;padding:12px}
 .officeReceiptSummary p{margin:8px 0}
 .officeReceiptFooter{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 16px max(10px,env(safe-area-inset-bottom));border-top:1px solid #dae3ed;background:#fff;font-size:14px}
 .officeReceiptFooter>label{flex:1 1 100%;display:flex;align-items:center;gap:8px;margin:0}
 .officeReceiptFooter input[type=checkbox]{width:22px;height:22px;flex-shrink:0}
 .officeReceiptFooter>.btn{margin:0;min-height:44px;white-space:normal}
}
@media screen and (max-width:1000px){.officeReceiptGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media screen and (max-width:600px){
 .officeReceiptDialog>header{padding:8px 10px;gap:8px}.officeReceiptDialog h2{font-size:18px}
 .officeReceiptDialog>.officeReceiptBody{padding:10px}
 .officeReceiptGrid,.officeReceiptActions{grid-template-columns:minmax(0,1fr);gap:10px}
 .officeReceiptGrid input,.officeReceiptGrid select{font-size:16px}
 .officeReceiptFooter{padding:8px 10px max(8px,env(safe-area-inset-bottom));gap:6px;font-size:13px}
 .officeReceiptFooter>.btn{flex:1 1 120px;font-size:14px;padding:8px}
}

.unlinkedQueue{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:10px}
.unlinkedQueueCard{border:1px solid #d5e0eb;border-radius:10px;padding:12px;min-width:0}
.unlinkedQueueCard>.btn{width:100%;text-align:left;display:grid;gap:4px;overflow-wrap:anywhere}
.unlinkedCardEditing{grid-column:1/-1;outline:2px solid #c71932;outline-offset:-2px}
.unlinkedCardEditing h3{margin:0 0 12px}
.unlinkedReviewLayout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,1fr);gap:16px}
.unlinkedReviewLayout form{min-width:0}.unlinkedReviewLayout select,.unlinkedReviewLayout textarea{width:100%;box-sizing:border-box;padding:8px;min-height:40px}.unlinkedReviewLayout textarea{min-height:65px}
.unlinkedDocument img,.unlinkedDocument iframe{display:block;width:100%;height:360px;object-fit:contain;border:1px solid #d5e0eb}.unlinkedDocument p{margin:0 0 8px;overflow-wrap:anywhere}
@media(max-width:650px){.unlinkedReviewLayout{grid-template-columns:1fr}.unlinkedDocument img,.unlinkedDocument iframe{height:220px}}

/* Lost receipts fill the viewport without stretching fields or clipping actions. */
@media screen{
 body dialog.officeReceiptDialog.lostReceiptFullscreen[open]{box-sizing:border-box;width:calc(100vw - 16px);max-width:none;height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);margin:auto;inset:0}
 .lostReceiptFullscreen .officeReceiptGrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
 .lostReceiptFullscreen .officeReceiptActions{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));align-items:end}
 .lostReceiptFullscreen .officeReceiptBody{overflow-x:hidden}
 .lostReceiptFullscreen .officeReceiptActions>.btn{margin:0;min-height:44px}
 .lostReceiptFullscreen .officeReceiptFooter>.btn{flex:1 1 180px}
 .lostReceiptFullscreen input,.lostReceiptFullscreen select{min-width:0;max-width:100%}
}
@media screen and (max-width:600px){
 body dialog.officeReceiptDialog.lostReceiptFullscreen[open]{width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:0}
 .lostReceiptFullscreen .officeReceiptGrid{grid-template-columns:1fr}
}

.lostReceiptFullscreen .officeReceiptActions>label[hidden]{display:none!important}
.lostReceiptFullscreen .officeReceiptActions{grid-template-columns:repeat(2,minmax(0,1fr))}
.lostReceiptMobileNote{display:none}
.lostReceiptDrafts{margin:8px 0;padding:10px;background:#f0f5fc;border-radius:10px}
.lostReceiptDrafts h3{margin:0 0 8px}.lostReceiptDrafts .btn{white-space:normal;overflow-wrap:anywhere}
.lostReceiptMobileCapture .officeReceiptBody{display:flex;flex-direction:column;gap:10px}
.lostReceiptMobileCapture .officeReceiptBody>.officeReceiptActions{order:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lostReceiptMobileCapture .officeReceiptActions .btn{background:#1462e8;color:#fff;border:0;min-height:48px;font-size:15px;padding:10px}
.lostReceiptMobileCapture .lostReceiptMobileNote{display:block;order:1;font-size:14px}
.lostReceiptMobileCapture .officeReceiptPreview{order:2;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.lostReceiptMobileCapture .officeReceiptPreview img,.lostReceiptMobileCapture .officeReceiptPreview canvas{max-height:42dvh;width:auto;max-width:100%}
.lostReceiptMobileCapture [role=status]{order:3}
.lostReceiptMobileCapture .lostReceiptRetry{order:4}
.lostReceiptMobileCapture .lostReceiptDrafts{order:5}
.lostReceiptMobileCapture .lostReceiptDrafts button{display:none}
.lostReceiptMobileCapture .officeReceiptGrid,.lostReceiptMobileCapture .officeReceiptFooter,.lostReceiptMobileCapture .officeReceiptSummary,.lostReceiptMobileCapture .officeReceiptBody>button:not(.lostReceiptRetry),.lostReceiptMobileCapture .officeReceiptBody>p:not([role=status]):not(.lostReceiptMobileNote){display:none!important}
.lostReceiptFullscreen .lostReceiptRetry[hidden]{display:none!important}

.draftActionRow{display:flex;flex-wrap:wrap;gap:8px}.draftActionRow>.btn{flex:1;min-width:100px;margin:0;min-height:44px;background:#1462e8;color:#fff}.draftCard{border:1px solid #cbd9eb;border-radius:10px;padding:12px;margin:8px 0}.draftCard strong{overflow-wrap:anywhere}
.lostReceiptFullscreen [hidden]{display:none!important}
@media(min-width:701px) and (pointer:fine){.lostReceiptMobileCapture .lostReceiptDrafts button{display:block}}
.draftEditorMobileBlocked .officeReceiptBody>*:not(.draftDesktopHint),.draftEditorMobileBlocked .officeReceiptFooter{display:none!important}
@media(max-width:700px),(pointer:coarse){.lostReceiptDrafts .draftActionRow{display:none!important}}
@media(max-width:700px),(pointer:coarse){.draftReceiptEditor .officeReceiptBody>*:not(.draftDesktopHint),.draftReceiptEditor .officeReceiptFooter{display:none!important}}

body .draftReceiptEditor .officeReceiptBody{display:grid!important;grid-template-columns:minmax(0,2fr) minmax(200px,1fr);gap:12px;align-content:start}
body .draftReceiptEditor .officeReceiptGrid{grid-column:1;grid-row:1;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body .draftReceiptEditor .officeReceiptPreview{grid-column:2;grid-row:1 / span 3;min-width:0;text-align:center}
body .draftReceiptEditor .officeReceiptPreview img,body .draftReceiptEditor .officeReceiptPreview canvas{max-height:65dvh;max-width:100%}
body .draftReceiptEditor [role=status]{grid-column:1;margin:0!important;font-size:14px}
body .draftReceiptEditor .officeReceiptFooter{flex-wrap:wrap!important;gap:8px}
body .draftReceiptEditor .officeReceiptFooter>.btn{flex:1 1 150px;background:#1462e8!important;color:white!important;min-height:44px}
body .draftReceiptEditor .officeReceiptFooter>label{flex-basis:100%}
body .draftReceiptEditor .officeReceiptSummary:empty{display:none}
body .officeReceiptDialog .draftOpenCard{display:flex!important;flex-direction:column;align-items:flex-start;gap:8px;width:100%;box-sizing:border-box;background:#edf4ff;color:#18324c;text-align:left;min-height:72px}
body .officeReceiptDialog .draftOpenCard:hover{outline:2px solid #1462e8}
body .officeReceiptDialog .draftOpenCard span{font-weight:400}
body #expenseFundsDialog .draftActionRow{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
body #expenseFundsDialog .draftActionRow .btn{flex:1;background:#1462e8;color:white;min-height:44px}
@media(min-width:701px) and (max-width:1100px){body .draftReceiptEditor .officeReceiptGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.lostReceiptMobileCapture .officeReceiptActions:has(button:not([hidden]):nth-of-type(3)){grid-template-columns:repeat(3,minmax(0,1fr))!important}
.lostReceiptMobileCapture .officeReceiptPreview{justify-content:flex-start!important}
body .lostReceiptMobileCapture .officeReceiptBody>button.lostReceiptAutoScan{display:block!important;width:100%;min-height:48px;background:#1462e8;color:#fff;grid-column:1/-1;margin:8px 0}
/* Consistent full-width scan and equal receipt navigation controls. */
body .officeReceiptDialog.lostReceiptMobileCapture .officeReceiptBody>button.lostReceiptAutoScan{height:72px!important;min-height:72px!important;max-height:none!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-width:0!important;padding:12px!important;line-height:1.25!important}
body .officeReceiptDialog .receiptBrowse{order:2;box-sizing:border-box;max-width:100%;min-width:0}
body .officeReceiptDialog .receiptBrowse>.btn{width:100%!important;min-width:0!important;max-width:none!important;height:72px!important;min-height:72px!important;max-height:none!important;box-sizing:border-box!important;margin:0!important;padding:8px 6px!important;display:flex!important;align-items:center!important;justify-content:center!important;white-space:normal!important;line-height:1.25!important;background:#1462e8;color:white}
body .officeReceiptDialog .receiptBrowse>span{font-size:13px;white-space:nowrap;text-align:center}
/* Compact receipt editing only; retain validation and approval controls. */
@media screen{
body dialog.officeReceiptDialog:has(.unlinkedCardEditing){width:calc(100vw - 16px)!important;max-width:none!important;height:calc(100dvh - 16px)!important;max-height:calc(100dvh - 16px)!important;margin:auto!important;border-radius:12px!important}
body .officeReceiptDialog:has(.unlinkedCardEditing)>.officeReceiptBody{padding:8px!important}
body .officeReceiptDialog .unlinkedCardEditing{padding:10px!important;background:#fff!important;border-radius:10px;min-width:0}
body .officeReceiptDialog .unlinkedReviewHeading{display:flex!important;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px!important}
body .officeReceiptDialog .unlinkedReviewHeading h3{margin:0!important;font-size:20px!important}
body .officeReceiptDialog .unlinkedReviewLayout{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)!important;gap:14px!important}
body .officeReceiptDialog .unlinkedReviewLayout form{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px 10px!important;align-content:start;min-width:0}
body .officeReceiptDialog .unlinkedReviewLayout form>label{margin:0!important;font-size:14px!important;line-height:1.3;display:flex;flex-direction:column;gap:4px;min-width:0}
body .officeReceiptDialog .unlinkedReviewLayout form>label:nth-child(3),body .officeReceiptDialog .unlinkedReviewLayout form>label:has(textarea),body .officeReceiptDialog .unlinkedReviewLayout form>label:has(input[type=checkbox]),body .officeReceiptDialog .unlinkedReviewLayout form>p{grid-column:1/-1}
body .officeReceiptDialog .unlinkedReviewLayout form>p{margin:2px 0!important;font-size:13px!important;line-height:1.4}
body .officeReceiptDialog .unlinkedReviewLayout :is(select,input:not([type=checkbox]),textarea){box-sizing:border-box!important;width:100%!important;min-width:0!important;min-height:40px!important;padding:8px 10px!important;border:1px solid #bdcfe4!important;border-radius:8px!important;background:#fff!important;color:#193b56!important;font:14px system-ui!important}
body .officeReceiptDialog .unlinkedReviewLayout textarea{height:58px!important;min-height:58px!important;resize:vertical}
body .officeReceiptDialog .unlinkedReviewLayout label:has(input[type=checkbox]){display:block!important;font-size:13px!important}
body .officeReceiptDialog .unlinkedDocument{min-width:0}body .officeReceiptDialog .unlinkedDocument p{font-size:13px!important;margin:0 0 5px!important}
body .officeReceiptDialog .unlinkedDocument :is(img,iframe){width:100%!important;height:clamp(230px,calc(100dvh - 270px),620px)!important;object-fit:contain!important;background:#f5f8fc;border:1px solid #d5e0eb;border-radius:8px}
body .officeReceiptDialog .unlinkedDocument a{display:inline-block;font-size:13px;margin-top:5px}
body .officeReceiptDialog:has(.unlinkedCardEditing) .btn{min-height:40px!important;padding:8px 12px!important;margin:0!important;background:#1762e8!important;color:#fff!important;border:1px solid #1762e8!important;border-radius:8px!important;font-size:14px!important}
body .officeReceiptDialog:has(.unlinkedCardEditing) .officeReceiptFooter{padding:8px 10px!important;gap:8px!important}
}
@media(max-width:700px){body .officeReceiptDialog .unlinkedReviewLayout{grid-template-columns:minmax(0,1fr)!important}body .officeReceiptDialog .unlinkedDocument :is(img,iframe){height:240px!important}body .officeReceiptDialog .unlinkedReviewHeading{flex-wrap:wrap}body .officeReceiptDialog .unlinkedReviewLayout form{grid-template-columns:minmax(0,1fr)!important}}
/* Size the active review from the dialog's remaining space, not the viewport. */
@media screen and (min-width:701px){
body dialog.officeReceiptDialog:has(.unlinkedCardEditing)>header{position:relative!important;top:auto!important;flex:0 0 auto!important;z-index:1}
body dialog.officeReceiptDialog:has(.unlinkedCardEditing)>.officeReceiptBody{display:flex!important;flex-direction:column!important;overflow:hidden!important;min-height:0!important}
body dialog.officeReceiptDialog:has(.unlinkedCardEditing)>.officeReceiptBody>p,body dialog.officeReceiptDialog:has(.unlinkedCardEditing) .unlinkedQueueCard:not(.unlinkedCardEditing){display:none!important}
body dialog.officeReceiptDialog:has(.unlinkedCardEditing) .unlinkedQueue{display:flex!important;flex-direction:column!important;flex:1!important;min-height:0!important}
body dialog.officeReceiptDialog .unlinkedCardEditing{display:flex!important;flex-direction:column!important;flex:1!important;min-height:0!important;box-sizing:border-box!important}
body dialog.officeReceiptDialog .unlinkedReviewHeading{flex:0 0 auto!important}
body dialog.officeReceiptDialog .unlinkedReviewLayout{flex:1!important;min-height:0!important;overflow:hidden!important}
body dialog.officeReceiptDialog .unlinkedDocument{display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important}
body dialog.officeReceiptDialog .unlinkedDocument :is(img,iframe){flex:1 1 0!important;min-height:0!important;height:0!important;max-height:100%!important;width:100%!important;object-fit:contain!important}
body dialog.officeReceiptDialog .unlinkedDocument :is(p,a){flex:0 0 auto!important}
body dialog.officeReceiptDialog .unlinkedReviewLayout form{min-height:0!important;overflow:auto!important;padding-right:4px;box-sizing:border-box}
}
@media screen and (max-width:700px){body dialog.officeReceiptDialog:has(.unlinkedCardEditing)>header{position:relative!important;top:auto!important}body dialog.officeReceiptDialog:has(.unlinkedCardEditing) .unlinkedQueueCard:not(.unlinkedCardEditing){display:none!important}}

body .officeReceiptDialog .unlinkedReviewLayout form.receiptPayerFields>label:nth-child(3){grid-column:auto!important}
