.work-order-photo-upload-queue{display:grid;gap:10px;margin-top:10px}.work-order-photo-upload-item{align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 22px #0f172a0f;display:grid;gap:10px;grid-template-columns:70px minmax(0,1fr) auto;padding:9px}.work-order-photo-upload-item.status-complete{background:color-mix(in srgb,var(--success-soft) 46%,var(--panel));border-color:color-mix(in srgb,var(--success) 34%,var(--line))}.work-order-photo-upload-item.status-failed{background:color-mix(in srgb,var(--danger-soft) 52%,var(--panel));border-color:color-mix(in srgb,var(--danger) 38%,var(--line))}.work-order-photo-upload-preview{background:var(--soft);border-radius:10px;display:grid;height:58px;overflow:hidden;place-items:center;width:70px}.work-order-photo-upload-preview img{display:block;height:100%;object-fit:cover;width:100%}.work-order-photo-upload-preview span{animation:spin .85s linear infinite;border:3px solid color-mix(in srgb,var(--cyan) 28%,var(--line));border-radius:999px;border-top-color:var(--cyan);height:26px;width:26px}.work-order-photo-upload-body{display:grid;gap:6px;min-width:0}.work-order-photo-upload-title{align-items:center;display:flex;gap:8px;justify-content:space-between;min-width:0}.work-order-photo-upload-title strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.work-order-photo-upload-title span{color:var(--muted);flex:0 0 auto;font-size:10px;font-weight:900;text-transform:uppercase}.work-order-photo-upload-progress{display:grid;gap:4px}.work-order-photo-upload-progress small{color:var(--muted);font-size:12px;font-weight:750;line-height:1.35}.work-order-photo-upload-progress small.error,[data-work-order-photo-ai-status].error{color:var(--danger)}.photo-stage-pill{align-items:center;background:color-mix(in srgb,var(--cyan) 11%,var(--panel));border-radius:999px;color:var(--cyan-deep);display:inline-flex;font-size:11px;font-weight:950;min-height:24px;padding:3px 8px;width:max-content}.status-complete .photo-stage-pill{background:var(--success-soft);color:var(--success)}.status-failed .photo-stage-pill{background:var(--danger-soft);color:var(--danger)}.work-order-photo-upload-actions{display:grid;gap:6px;justify-items:end}.work-order-photo-upload-actions button{border-radius:999px;font-size:12px;min-height:32px;padding:0 10px}@media(max-width:640px){.work-order-photo-upload-item{align-items:start;grid-template-columns:58px minmax(0,1fr)}.work-order-photo-upload-preview{height:52px;width:58px}.work-order-photo-upload-actions{display:flex;grid-column:1 / -1;justify-content:flex-end}.work-order-photo-upload-title{display:grid;gap:2px}.work-order-photo-upload-title span{justify-self:start}}@media(prefers-reduced-motion:reduce){.work-order-photo-upload-preview span{animation:none}}.work-order-photo-form:has([data-work-order-photo-submit][hidden]){gap:0;padding-block:8px 9px}.work-order-photo-form:has([data-work-order-photo-submit][hidden]) .system-file-picker{margin:0}.work-order-photo-form:has([data-work-order-photo-submit][hidden]) [data-work-order-photo-ai-status],.work-order-photo-form:has([data-work-order-photo-submit][hidden]) [data-work-order-photo-upload-queue],.work-order-photo-form:has([data-work-order-photo-submit][hidden]) .inline-action-row{display:none}.work-order-photo-lightbox{overflow:hidden}.work-order-photo-lightbox-panel{box-sizing:border-box;grid-template-rows:auto minmax(0,1fr);max-width:calc(100vw - 36px);overflow:hidden}.work-order-photo-lightbox-panel img{align-self:center;height:auto;justify-self:center;max-width:100%;min-height:0;min-width:0;width:auto}@media(max-width:640px){.work-order-photo-lightbox{align-items:center;justify-items:center;padding:10px}.work-order-photo-lightbox-panel{gap:8px;max-height:calc(100dvh - 20px);max-width:calc(100vw - 20px);padding:8px;width:calc(100vw - 20px)}.work-order-photo-lightbox-header{min-width:0;padding:2px 2px 0}.work-order-photo-lightbox-header button{flex:0 0 auto;height:36px;width:36px}.work-order-photo-lightbox-panel img{max-height:calc(100dvh - 86px);max-width:100%;object-fit:contain}}
