/* Shared work-order details only. Other dialogs and staff pages are unchanged. */
#detail[open]{display:flex;flex-direction:column;position:fixed;width:860px;max-width:calc(100vw - 40px);height:min(900px,calc(var(--detail-viewport,100dvh) - 48px));max-height:calc(var(--detail-viewport,100dvh) - 48px);padding:0;overflow:hidden;border:1px solid #e5e5ea;border-radius:18px;background:#fff}
#detail .detail-header{flex:none;padding:16px 20px;border-bottom:1px solid #e5e5ea;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;max-height:38%;overflow:auto}
#detail .detail-header .eyebrow{grid-column:1;grid-row:1;margin:0;align-self:center;letter-spacing:0;font-size:13px}
#detail .detail-header .close{grid-column:2;grid-row:1;position:static;float:none;box-shadow:none;min-height:44px;padding:8px 14px}
#detail .detail-header h2{grid-column:1/-1;margin:0;font-size:23px;line-height:1.35;overflow-wrap:anywhere}
#detail .vehicle-model{display:block;overflow:visible;-webkit-line-clamp:unset}
#detail .vehicle-separator{display:none}
#detail .vehicle-plate{display:block;font-size:16px;line-height:1.5;color:#414147;margin-top:3px}
#detail .detail-meta{grid-column:1;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0;font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums}
#detail .detail-edit{grid-column:2;margin:0;align-self:center}
#detail .detail-edit button{min-height:44px;padding:8px 12px}
#detail .detail-notices{flex:none;max-height:25%;overflow:auto;padding:0 20px;background:#fff}
#detail .detail-notices:empty{display:none}
#detail .detail-notices>.warn{position:static;margin:8px 0;padding:8px 12px;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
#detail .detail-notices>.badge{margin:8px 0}
#detail #detail-sync:empty{display:none}
#detail .detail-notices button{min-height:44px;margin:6px 0 0;display:block}
#detail .detail-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px 20px;scroll-padding:16px;-webkit-overflow-scrolling:touch}
#detail .detail-body>.muted{font-size:13px;margin-bottom:4px}
#detail .detail-body .section{padding:14px 0;border-color:#e5e5ea;line-height:1.65;overflow-wrap:anywhere}
#detail .detail-body .section:first-of-type{padding-top:8px}
#detail .detail-body .images{gap:10px;white-space:normal}
#detail .detail-body .images img{width:140px;height:110px;background:#f8f8fa;object-fit:contain}
#detail .detail-history{padding:8px 0;font-size:13px;line-height:1.65}
#detail .detail-history summary{min-height:44px;cursor:pointer;padding:12px 0;font-weight:600}
#detail .detail-footer{flex:none;padding:12px 20px max(12px,env(safe-area-inset-bottom));border-top:1px solid #e5e5ea;background:#fafafa;max-height:45%;overflow:auto;overscroll-behavior:contain}
#detail .detail-footer>.section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 150px;gap:6px 12px;border:0;padding:0;white-space:normal;line-height:1.4}
#detail .detail-field{min-width:0}
#detail .detail-field label{font-size:13px;margin:0 0 6px}
#detail .detail-field input,#detail .detail-field select{width:100%;min-width:0;min-height:44px;padding:10px;font-size:15px}
#detail .detail-footer .actions{margin:0;align-self:end}
#detail .detail-footer .actions button{width:100%;min-height:44px}
#detail .detail-footer small{grid-column:1/-1;font-size:12px;color:#626268}
#detail .detail-footer .field-error{grid-column:1/-1;margin:0;min-height:0;font-size:13px}
#detail .detail-footer .field-error:empty{display:none}
@media(max-width:800px){
 #detail[open]{inset:var(--detail-top,0px) auto auto 0;width:100%;max-width:100%;height:var(--detail-viewport,100dvh);max-height:var(--detail-viewport,100dvh);margin:0;border:0;border-radius:0}
 #detail .detail-header{padding:10px 12px;gap:6px 8px}
 #detail .detail-header h2{font-size:19px}
 #detail .detail-header .eyebrow{font-size:12px}
 #detail .detail-meta{font-size:13px;gap:6px}
 #detail .detail-meta .badge{font-size:12px}
 #detail .detail-edit button{font-size:13px;padding:8px 10px}
 #detail .detail-body{padding:12px}
 #detail .detail-notices{padding:0 12px}
 #detail .detail-notices>.warn{font-size:12px;margin:6px 0;padding:8px 10px}
 #detail .detail-footer{padding:10px 12px max(10px,env(safe-area-inset-bottom))}
 #detail .detail-footer>.section{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 10px}
 #detail .detail-footer .actions{grid-column:1/-1}
 #detail .detail-body .images img{width:calc((100% - 10px)/2);height:110px}
}
@media(max-height:560px){
 #detail .detail-header{max-height:32%;padding-top:6px;padding-bottom:6px}
 #detail .detail-header h2{font-size:17px}
 #detail .detail-notices{max-height:22%}
 #detail .detail-footer{max-height:40%;padding-top:6px;padding-bottom:max(6px,env(safe-area-inset-bottom))}
 #detail .detail-footer>.section{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 92px;gap:4px 6px}
 #detail .detail-footer .actions{grid-column:auto}
 #detail .detail-footer small{display:none}
 #detail .detail-field label{margin-bottom:2px;font-size:12px}
 #detail .detail-field input,#detail .detail-field select{padding:8px 4px}
 #detail .detail-footer .actions button{padding:8px 4px;font-size:13px}
}
/* visualViewport can shrink while CSS media queries retain the layout height. */
#detail.detail-compact .detail-header{max-height:32%;padding-top:6px;padding-bottom:6px}
#detail.detail-compact .detail-header h2{font-size:17px}
#detail.detail-compact .detail-notices{max-height:22%}
#detail.detail-compact .detail-footer{max-height:40%;padding-top:6px;padding-bottom:max(6px,env(safe-area-inset-bottom))}
#detail.detail-compact .detail-footer>.section{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 92px;gap:4px 6px}
#detail.detail-compact .detail-footer .actions{grid-column:auto}
#detail.detail-compact .detail-footer small{display:none}
#detail.detail-compact .detail-field label{margin-bottom:2px;font-size:12px}
#detail.detail-compact .detail-field input,#detail.detail-compact .detail-field select{padding:8px 4px}
#detail.detail-compact .detail-footer .actions button{padding:8px 4px;font-size:13px}

/* Final spacing pass: one normal content scroller, 44px controls retained. */
#detail .detail-header,#detail .detail-footer{overflow:visible;max-height:none}
#detail .detail-footer .detail-field label{margin-bottom:2px}
#detail .detail-footer>.section{gap:4px 12px}
@media(max-width:800px){
 #detail .detail-header{padding:4px 12px;gap:2px 8px}
 #detail .vehicle-plate{line-height:20px;margin-top:1px}
 #detail .detail-footer{padding:5px 12px max(5px,env(safe-area-inset-bottom))}
 #detail .detail-footer>.section{gap:4px 10px}
}
/* Only extreme short screens use bounded fallback scrolling in fixed areas. */
#detail.detail-compact .detail-header{max-height:32%;overflow:auto}
#detail.detail-compact .detail-footer{max-height:40%;overflow:auto}
@media(max-height:560px){
 #detail .detail-header{max-height:32%;overflow:auto}
 #detail .detail-footer{max-height:40%;overflow:auto}
}