On <script setup>
import { date, string } from 'alga-js'
import { toast } from 'bulma-toast'
import { Capacitor } from '@capacitor/core'

definePageMeta({
  layout: 'mobile',
  middleware: ['auth'],
  // Opt out of root <NuxtPage :keepalive> so this page is destroyed when the
  // user navigates away (e.g. back to /mobile) and freshly recreated on the
  // next visit — no stale scan/load state carries over.
  keepalive: false
})

const router = useRouter()
const route = useRoute()
const config = useRuntimeConfig()
const searchQuery = ref('')
const isNativeApp = Capacitor.isNativePlatform()

// Image capture (Strapi attachments)
const capturedImages = ref([])
const showCamera = ref(false)
const videoRef = ref(null)
const canvasRef = ref(null)
const stream = ref(null)
const selectedImage = ref(null)
const showImageModal = ref(false)

// Label printing
const printLabel = ref(true)
const labelCount = ref(1)
const selectedPrinter = ref('labelprinter-3')
const availablePrinters = [
  'labelprinter-1', 'labelprinter-2', 'labelprinter-3',
  'labelprinter-4', 'labelprinter-5', 'labelprinter-6'
]
let jsPDFLib = null
let JsBarcodeLib = null

// Article label printing (one label per qty unit, mirrors desktop "Print Labels Server Only")
const articleLabelPrinter = ref('labelprinter-2')
const selectedArticleLineIds = ref(new Set())
const articleLabelPrinting = ref(false)

// Page mode: 'create' (new receipt) | 'lookup' (view existing)
const pageMode = ref('create')
const lookupQuery = ref('')
const lookupInputRef = ref(null)
const lookupResult = ref(null)
const lookupLines = ref([])
const lookupAttachments = ref([])
const isLookupLoading = ref(false)
const lookupError = ref('')
const lookupSelectedImage = ref(null)
const showLookupImageModal = ref(false)

const loading = ref(false)
const error = ref('')
const feedback = useFeedback()
useKeepAwake() // keep the screen on while receiving
const organizationId = useCookie('logship_organization_id')
const warehouseId = useCookie('logship_warehouse_id')
const clientId = useCookie('logship_client_id')
const roleId = useCookie('logship_role_id')
const userId = useCookie('logship_user_id')
const organizations = useCookie('logship_organizations')

const hiddenScannerInput = ref(null)

// Default partner
const DEFAULT_PARTNER_ID = 1029012
const defaultPartnerLocationId = ref(null)

// Step: 'org' -> 'scan' -> 'submitting'
const currentStep = ref('org')

// Article carried over from /mobile/product "Wareneingang" button. Remembered so it
// is added to the receipt even if org/warehouse auto-resolution fails and the user
// has to pick them manually (then confirmOrgSelection adds it). See autoStartForProduct.
// The id is the source of truth (exact clicked article); the value is the fallback.
const pendingReceiveProductValue = ref(null)
const pendingReceiveProductId = ref(null)

// Org / warehouse selection
const selectedOrganization = ref(null)
const selectedWarehouse = ref(null)
const warehouses = ref([])
const isLoadingWarehouses = ref(false)

// Receipt lines (scanned products)
const receiptLines = ref([])

// Doc type for MM Receipt
const docTypeId = ref(null)

// Product text search
const productSearchTerm = ref('')
const productSearchResults = ref([])
const isSearchingProduct = ref(false)
const showProductSearch = ref(false)
let productSearchTimeout = null

// Number pad
const showNumberPad = ref(false)
const editingLineIndex = ref(null)
const numberInput = ref('')

// Locator selector
const showLocatorSelector = ref(false)
const availableLocators = ref([])
const selectedLocatorId = ref(null)
const locatorScanQuery = ref('')
const locatorScanInputRef = ref(null)
const locatorMode = ref('single') // 'single' or 'all'
const editingLocatorLineIndex = ref(null)
const selectedLocatorGroup = ref(null) // e.g., 'AA', 'BB'
const showLocatorBrowser = ref(false) // reveal the grouped browser
const isLoadingLocators = ref(false)

// Global locator (for all lines)
const globalLocatorId = ref(null)
const globalLocatorCode = ref(null)

// Submitting state
const submitting = ref(false)

// Post-completion final page: after the receipt is created the user can
// optionally record a task (R_Request linked via M_InOut_ID) with manually
// entered time (hours + minutes).
const completedReceipt = ref(null)   // { id, documentNo, orgId, orgName, lineCount }
const taskHours = ref('')
const taskMinutes = ref('')
const creatingTask = ref(false)
const taskCreatedDocNo = ref(null)

const taskTotalMinutes = computed(() =>
  (Number(taskHours.value) || 0) * 60 + (Number(taskMinutes.value) || 0)
)

// Source PO (when receipt is pre-filled from an open purchase order)
const sourcePO = ref(null)             // { id, documentNo, partner: {id,name}, partnerLocation: {id} }
const showPOPicker = ref(false)
const openPOs = ref([])
const isLoadingPOs = ref(false)
const poFilter = ref('')               // client-side filter by docNo or partner

// Inline article preview per PO card (accordion: one expanded at a time).
// Lines are lazy-loaded on first expand and cached by PO id so re-expanding
// is instant.
const expandedPoId = ref(null)         // id of the currently expanded PO card
const poOrderLines = ref({})           // { [poId]: [{ id, name, value, qtyOrdered, qtyRemaining, uom }] }
const loadingPoLines = ref({})         // { [poId]: boolean }

// Focus management
const focusHiddenInput = () => {
  if (hiddenScannerInput.value) {
    hiddenScannerInput.value.focus()
  }
}

const focusInput = () => {
  if (showNumberPad.value || showLocatorSelector.value || completedReceipt.value) return
  if (pageMode.value === 'lookup') {
    nextTick(() => lookupInputRef.value?.focus())
    return
  }
  nextTick(() => focusHiddenInput())
}

// Barcode scanner integration
const {
  useScannerMode,
  showScanner,
  scannerError,
  isProcessingScan
} = useBarcodeScanner((scannedCode) => {
  if (pageMode.value === 'lookup') {
    lookupQuery.value = scannedCode
    searchReceipt()
    return
  }
  searchQuery.value = scannedCode
  scanProduct()
})

// Native scanner integration
const { isNative } = useNativeScanner((barcode) => {
  if (pageMode.value === 'lookup') {
    lookupQuery.value = barcode
    searchReceipt()
    return
  }
  searchQuery.value = barcode
  scanProduct()
})

// True when the user is typing into a real editable field (NOT the hidden
// scanner input) — e.g. the manual product-search or lookup box. Used to stop
// the focus monitor stealing focus (which dismisses the on-screen keyboard) and
// to stop the global keydown buffer swallowing the keystrokes.
const isManualInputFocused = () => {
  const el = document.activeElement
  if (!el || el === hiddenScannerInput.value) return false
  const tag = el.tagName
  // SELECT is included so the focus monitor doesn't yank focus off an open
  // native printer dropdown (which would dismiss it) — see focusMonitorPaused.
  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || el.isContentEditable === true
}

// Global keyboard buffer for HID scanners
let scanBuffer = ''
let scanTimeout = null
const SCAN_TIMEOUT = 500

// Set true while a native printer <select> dropdown is open so the focus monitor
// (and scan buffer) leave it alone — otherwise the 500ms re-focus of the hidden
// scanner input dismisses the native picker the instant it opens (it "flashes for
// a second then vanishes"). Cleared once a printer is chosen / the picker closes.
const focusMonitorPaused = ref(false)

const handleGlobalKeydown = (event) => {
  if (focusMonitorPaused.value) return
  if (showNumberPad.value || showLocatorSelector.value || showProductSearch.value || completedReceipt.value) return
  if (showCamera.value || showImageModal.value || showLookupImageModal.value) return
  // Don't intercept while the user types in a real input (product search, lookup
  // box, …) — the preventDefault() below would otherwise swallow the keystroke.
  if (isManualInputFocused()) return

  if (event.key === 'Enter') {
    event.preventDefault()
    event.stopPropagation()
    if (scanBuffer.length > 0) {
      if (pageMode.value === 'lookup') {
        lookupQuery.value = scanBuffer
        scanBuffer = ''
        if (scanTimeout) { clearTimeout(scanTimeout); scanTimeout = null }
        searchReceipt()
        return
      }
      searchQuery.value = scanBuffer
      scanBuffer = ''
      if (scanTimeout) { clearTimeout(scanTimeout); scanTimeout = null }
      scanProduct()
    }
    return
  }

  if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
    event.preventDefault()
    scanBuffer += event.key
    if (scanTimeout) clearTimeout(scanTimeout)
    scanTimeout = setTimeout(() => { scanBuffer = '' }, SCAN_TIMEOUT)
  }
}

let focusCheckInterval = null
const startFocusMonitor = () => {
  if (focusCheckInterval) clearInterval(focusCheckInterval)
  focusCheckInterval = setInterval(() => {
    if (focusMonitorPaused.value) return
    if (pageMode.value === 'lookup') return
    if (showCamera.value || showImageModal.value || showLookupImageModal.value) return
    // Don't steal focus while the manual product search is open or the user is
    // actively typing in a real input — that dismisses the on-screen keyboard.
    if (!showNumberPad.value && !showLocatorSelector.value && !showProductSearch.value && !completedReceipt.value && !isManualInputFocused()) {
      if (document.activeElement !== hiddenScannerInput.value && hiddenScannerInput.value) {
        hiddenScannerInput.value.focus()
      }
    }
  }, 500)
}

const stopFocusMonitor = () => {
  if (focusCheckInterval) { clearInterval(focusCheckInterval); focusCheckInterval = null }
}

// Printer <select> dropdowns: pause the scanner-focus monitor on pointerdown
// (before the focus race resolves) so the native picker can open and stay open,
// then resume the aggressive focusing once a printer is picked / the picker
// closes. Mirrors the documented pause-on-pointerdown pattern (see movement.vue).
const beginPrinterSelect = () => {
  focusMonitorPaused.value = true
  if (hiddenScannerInput.value) hiddenScannerInput.value.blur()
}

const endPrinterSelect = () => {
  focusMonitorPaused.value = false
  focusInput()
}

// Fetch doc type for MM Receipt (DocBaseType = 'MMR')
const fetchDocType = async () => {
  try {
    const res = await $fetch('/api/types/MMR', {
      headers: useRequestHeaders(['cookie'])
    })
    if (res?.records && res.records.length > 0) {
      docTypeId.value = res.records[0].id
    }
  } catch (err) {
    console.error('Error fetching document type:', err)
  }
}

// Fetch the default partner's first location (required for M_InOut)
const fetchDefaultPartnerLocation = async () => {
  try {
    const res = await $fetch(`/api/partners/partners/${DEFAULT_PARTNER_ID}/locations`, {
      headers: useRequestHeaders(['cookie'])
    })
    if (res?.records && res.records.length > 0) {
      defaultPartnerLocationId.value = res.records[0].id
    }
  } catch (err) {
    console.error('Error fetching default partner location:', err)
  }
}

// Organization selection
const selectOrganization = async (org) => {
  selectedOrganization.value = org
  selectedWarehouse.value = null
  warehouses.value = []
  isLoadingWarehouses.value = true

  try {
    const cId = clientId.value?.id || clientId.value
    const res = await $fetch(`/api/organizations/${org.id}/warehouses`, {
      method: 'GET',
      headers: useRequestHeaders(['cookie']),
      params: { clientId: cId }
    })

    const warehouseRecords = res?.records || res || []
    if (Array.isArray(warehouseRecords) && warehouseRecords.length > 0 && warehouseRecords[0]?.id) {
      warehouses.value = warehouseRecords.map(w => ({
        ...w,
        name: w.Name || w.name || w.identifier || ''
      }))
      selectedWarehouse.value = warehouses.value[0]
      if (warehouses.value.length === 1) {
        await nextTick()
        confirmOrgSelection()
      }
    } else {
      toast({ message: 'Keine Lager gefunden', type: 'is-warning', duration: 2000 })
    }
  } catch (err) {
    console.error('Error loading warehouses:', err)
    toast({ message: 'Fehler beim Laden der Lager', type: 'is-danger', duration: 2000 })
  } finally {
    isLoadingWarehouses.value = false
  }
}

const selectWarehouse = (wh) => {
  selectedWarehouse.value = wh
}

const confirmOrgSelection = async () => {
  if (!selectedOrganization.value?.id || !selectedWarehouse.value?.id) {
    toast({ message: 'Bitte Organisation und Lager auswählen', type: 'is-warning', duration: 2000 })
    return
  }
  currentStep.value = 'scan'
  receiptLines.value = []
  globalLocatorId.value = null
  globalLocatorCode.value = null
  feedback.success()

  // Load available locators for the selected warehouse
  loadLocators()

  // If we arrived from /mobile/product with an article to receive but couldn't
  // auto-resolve org/warehouse, add it now that the user has picked them. Prefer
  // the exact clicked product id over the (ambiguous) code.
  if (pendingReceiveProductId.value || pendingReceiveProductValue.value) {
    const pid = pendingReceiveProductId.value
    const pval = pendingReceiveProductValue.value
    pendingReceiveProductId.value = null
    pendingReceiveProductValue.value = null
    if (pid) {
      await scanProduct({ productId: pid, search: pval })
    } else {
      searchQuery.value = pval
      await scanProduct()
    }
  }

  focusInput()
}

// Load locators for the selected warehouse
const loadLocators = async () => {
  try {
    isLoadingLocators.value = true
    const whId = selectedWarehouse.value?.id
    if (!whId) return
    const orgId = selectedOrganization.value?.id
    const filter = `M_Warehouse_ID eq ${whId} AND IsActive eq true` + (orgId ? ` AND AD_Org_ID eq ${orgId}` : '')
    const res = await $fetch(`/api/filters/m_locator/${string.urlEncode(filter)}&$orderby=${string.urlEncode('Value asc')}&$top=500`, {
      headers: useRequestHeaders(['cookie'])
    })
    if (res?.records) {
      availableLocators.value = res.records.map(l => ({
        id: l.id,
        code: l.Value || l.identifier || l.Name,
        isDefault: l.IsDefault || false
      }))
    } else {
      availableLocators.value = []
    }

    // For receiving, default to the warehouse's default locator (IsDefault = 'Y').
    // The return-type locator preference belongs to /pages/mobile/return only.
    applyDefaultLocator()
  } catch (err) {
    console.error('Error loading locators:', err)
    availableLocators.value = []
  } finally {
    isLoadingLocators.value = false
  }
}

// Pick the warehouse's default locator (IsDefault = 'Y') from the already-loaded
// list and set it as the global default for incoming receipt lines. If no
// default locator exists, the global locator stays unset and the user picks
// one manually.
const applyDefaultLocator = () => {
  const defaultLocator = availableLocators.value.find(l => l.isDefault)
  if (!defaultLocator) return

  globalLocatorId.value = defaultLocator.id
  globalLocatorCode.value = defaultLocator.code

  // Apply to any already-added lines that have no locator yet (defensive —
  // loadLocators runs right after confirmOrgSelection clears receiptLines).
  receiptLines.value.forEach(line => {
    if (!line.locatorId) {
      line.locatorId = defaultLocator.id
      line.locatorCode = defaultLocator.code
    }
  })
}

// Scan/search product
// Duplicate product resolution (same flow as /mobile/product): the user picks
// the master to keep; the other duplicates get their UPC suffixed so the master
// becomes the unique match for that code, then the master is added to the receipt.
const duplicates = ref(null)
const duplicateSearchTerm = ref('')
const duplicateResolving = ref(false)

const resolveDuplicate = async (selectedProduct) => {
  duplicateResolving.value = true
  try {
    const others = duplicates.value.filter(d => d.id !== selectedProduct.id)
    let dupIndex = 0
    for (const dup of others) {
      const suffix = others.length === 1 ? '-duplicate' : `-duplicate-${dupIndex + 1}`
      const newUpc = (dup.UPC || duplicateSearchTerm.value) + suffix
      await $fetch('/api/materials/products/update', {
        method: 'PUT',
        headers: useRequestHeaders(['cookie']),
        body: { id: dup.id, upc: newUpc }
      })
      dupIndex++
    }
    // Re-scan the now-unique master and add it to the receipt
    duplicates.value = null
    duplicateSearchTerm.value = ''
    searchQuery.value = selectedProduct.Value || selectedProduct.SKU || selectedProduct.UPC || ''
    await scanProduct()
  } catch (err) {
    console.error('Error resolving duplicates:', err)
    feedback.error()
  } finally {
    duplicateResolving.value = false
  }
}

// `opts.productId` (a number) forces a direct by-id lookup — used when the user
// arrived from /mobile/product and clicked a SPECIFIC article, so we add exactly
// that product instead of re-searching by its (possibly ambiguous) code. Called
// bare as an event handler in the template, so guard against a DOM event arg.
const scanProduct = async (opts = {}) => {
  const overrideId = (opts && Number(opts.productId) > 0) ? Number(opts.productId) : null
  // When a productId is given we STILL send the product's code as `search`, so a
  // server that doesn't (yet) understand productId can resolve it by code — and we
  // never hit the endpoint's "search term required" guard with an empty body.
  const fallbackCode = (opts && typeof opts.search === 'string') ? opts.search.trim() : ''

  if (!overrideId && !searchQuery.value.trim()) return

  loading.value = true
  error.value = ''
  const searchTerm = overrideId ? fallbackCode : searchQuery.value.trim()
  if (!overrideId) searchQuery.value = ''

  try {
    const data = await $fetch('/api/mobile/product-lookup', {
      method: 'POST',
      body: {
        search: searchTerm,
        ...(overrideId ? { productId: overrideId } : {}),
        warehouseId: selectedWarehouse.value?.id || warehouseId.value,
        organizationId: selectedOrganization.value?.id,
        excludeBom: true // hide BOM / JTL-BOM articles from receive scan/lookup
      }
    })

    // Multiple products share this code — let the user pick which keeps it
    if (data && data.duplicates) {
      duplicates.value = data.duplicates
      duplicateSearchTerm.value = data.searchTerm || searchTerm
      feedback.error()
      loading.value = false
      focusInput()
      return
    }

    if (data && data.id) {
      // Validate product belongs to the selected org
      const productOrgId = data.AD_Org_ID?.id ?? data.AD_Org_ID
      const selectedOrgId = selectedOrganization.value?.id
      if (selectedOrgId && productOrgId && Number(productOrgId) !== 0 && Number(productOrgId) !== Number(selectedOrgId)) {
        error.value = `Artikel gehört zu einer anderen Organisation (${data.AD_Org_ID?.identifier || productOrgId})`
        feedback.error()
        loading.value = false
        focusInput()
        return
      }

      // Check if already in list - increment qty
      const existingIndex = receiptLines.value.findIndex(item => item.productId === data.id)
      if (existingIndex !== -1) {
        receiptLines.value[existingIndex].qtyEntered += 1
        receiptLines.value[existingIndex].movementQty += 1
        feedback.success()
      } else {
        receiptLines.value.unshift({
          productId: data.id,
          productName: data.Name,
          productValue: data.Value,
          productSKU: data.SKU,
          productUPC: data.UPC,
          uomId: data.C_UOM_ID?.id || '100',
          uom: data.C_UOM_ID?.identifier || 'Each',
          qtyEntered: 1,
          movementQty: 1,
          locatorId: globalLocatorId.value || null,
          locatorCode: globalLocatorCode.value || null,
          line: (receiptLines.value.length + 1) * 10
        })
        feedback.success()
      }
    } else {
      error.value = 'Artikel nicht gefunden: ' + (searchTerm || ('#' + (overrideId || '')))
      feedback.error()
    }
  } catch (err) {
    error.value = err?.data?.message || 'Fehler bei der Suche'
    feedback.error()
    console.error('Search error:', err)
  } finally {
    loading.value = false
    focusInput()
  }
}

// Product text search (debounced)
const toggleProductSearch = () => {
  showProductSearch.value = !showProductSearch.value
  if (!showProductSearch.value) {
    productSearchTerm.value = ''
    productSearchResults.value = []
  }
}

const searchProductByText = () => {
  if (productSearchTimeout) clearTimeout(productSearchTimeout)
  if (!productSearchTerm.value || productSearchTerm.value.length < 2) {
    productSearchResults.value = []
    return
  }
  productSearchTimeout = setTimeout(async () => {
    isSearchingProduct.value = true
    try {
      const res = await $fetch('/api/materials/products/search', {
        headers: useRequestHeaders(['cookie']),
        params: { search: productSearchTerm.value, limit: 15, orgId: selectedOrganization.value?.id, excludeBom: true }
      })
      productSearchResults.value = res?.records || []
    } catch (e) {
      productSearchResults.value = []
    } finally {
      isSearchingProduct.value = false
    }
  }, 300)
}

const selectProductFromSearch = (selectedProduct) => {
  searchQuery.value = selectedProduct.Value
  productSearchTerm.value = ''
  productSearchResults.value = []
  showProductSearch.value = false
  scanProduct()
}

// Load open purchase orders for the selected organization
const openPOPicker = async () => {
  showPOPicker.value = true
  poFilter.value = ''
  // Always refresh on open. The server returns only DocStatus='CO' POs, but the
  // page is kept-alive (<NuxtPage keepalive>), so a cached openPOs list would show
  // stale entries whose status has since changed (already received / closed / voided).
  // Re-fetching each open guarantees the list reflects the current CO-only state.
  await loadOpenPOs()
}

const closePOPicker = () => {
  showPOPicker.value = false
  expandedPoId.value = null
}

const loadOpenPOs = async () => {
  isLoadingPOs.value = true
  // The list is changing — drop any cached/expanded preview so we never show
  // stale article data against a refreshed PO list.
  expandedPoId.value = null
  poOrderLines.value = {}
  loadingPoLines.value = {}
  try {
    const orgId = selectedOrganization.value?.id
    const res = await $fetch('/api/mobile/po-open', {
      headers: useRequestHeaders(['cookie']),
      params: { organizationId: orgId, limit: 100 }
    })
    openPOs.value = Array.isArray(res?.records) ? res.records : []
  } catch (err) {
    console.error('Error loading open POs:', err)
    toast({ message: 'Fehler beim Laden der Bestellungen', type: 'is-danger', duration: 2500 })
    openPOs.value = []
  } finally {
    isLoadingPOs.value = false
  }
}

const filteredPOs = computed(() => {
  const q = poFilter.value.trim().toLowerCase()
  if (!q) return openPOs.value
  return openPOs.value.filter(p =>
    (p.documentNo || '').toLowerCase().includes(q) ||
    (p.partner?.name || '').toLowerCase().includes(q) ||
    (p.poReference || '').toLowerCase().includes(q) ||
    (p.org?.name || '').toLowerCase().includes(q)
  )
})

// Expand/collapse a PO card to preview the articles it contains, WITHOUT
// selecting it. Accordion behaviour: opening one collapses the other.
const togglePoDetails = async (po) => {
  const poId = po.id
  if (expandedPoId.value === poId) {
    expandedPoId.value = null
    return
  }
  expandedPoId.value = poId
  if (!poOrderLines.value[poId]) {
    await loadPoDetails(poId)
  }
}

// Lazy-load a PO's order lines for the inline preview. Mapped to a compact
// display shape (separate from selectPO's receipt-line mapping on purpose).
const loadPoDetails = async (poId) => {
  loadingPoLines.value[poId] = true
  try {
    const res = await $fetch(`/api/orders/${poId}/order-line`, {
      headers: useRequestHeaders(['cookie'])
    })
    const records = Array.isArray(res?.records) ? res.records : []
    poOrderLines.value[poId] = records.map((l) => {
      const ordered = Number(l.QtyOrdered || 0)
      const delivered = Number(l.QtyDelivered || 0)
      return {
        id: l.id,
        name: l.M_Product_ID?.identifier || l.M_Product_ID?.Name || l.Description || '—',
        value: l.M_Product_ID?.Value || l.M_Product_ID?.SKU || '',
        qtyOrdered: ordered,
        qtyRemaining: Math.max(0, ordered - delivered),
        uom: l.C_UOM_ID?.identifier || 'Stk'
      }
    })
  } catch (err) {
    console.error('Error loading PO preview lines:', err)
    toast({ message: 'Fehler beim Laden der Artikel', type: 'is-danger', duration: 2500 })
    poOrderLines.value[poId] = []
  } finally {
    loadingPoLines.value[poId] = false
  }
}

// Pick a PO and load its open lines into receiptLines. Existing lines are
// replaced. The user can still edit qty/locator and add/remove lines before
// completing the receipt.
//
// When no organization is selected yet (picker opened from the org-step), the
// PO's own AD_Org_ID + M_Warehouse_ID are used to auto-set both and transition
// straight to the scan step. The user never sees the org/warehouse picker in
// that flow.
const selectPO = async (po) => {
  const orgPreSelected = !!selectedOrganization.value?.id

  if (orgPreSelected && receiptLines.value.length > 0) {
    if (!confirm(`Bestehende Positionen (${receiptLines.value.length}) durch PO-Positionen ersetzen?`)) return
  }

  // Auto-resolve org + warehouse from the PO when arriving via the org-step.
  if (!orgPreSelected) {
    const orgs = Array.isArray(organizations.value) ? organizations.value : []
    const matchedOrg = orgs.find(o => Number(o.id) === Number(po.org?.id))
    if (!matchedOrg) {
      toast({
        message: po.org?.name
          ? `Organisation "${po.org.name}" nicht verfügbar`
          : 'Organisation der Bestellung nicht verfügbar',
        type: 'is-warning',
        duration: 2500
      })
      return
    }
    isLoadingPOs.value = true
    try {
      selectedOrganization.value = matchedOrg
      warehouses.value = []
      selectedWarehouse.value = null
      isLoadingWarehouses.value = true

      const cId = clientId.value?.id || clientId.value
      const whRes = await $fetch(`/api/organizations/${matchedOrg.id}/warehouses`, {
        method: 'GET',
        headers: useRequestHeaders(['cookie']),
        params: { clientId: cId }
      })
      const whRecords = whRes?.records || whRes || []
      if (!Array.isArray(whRecords) || whRecords.length === 0 || !whRecords[0]?.id) {
        toast({ message: 'Keine Lager für diese Organisation', type: 'is-warning', duration: 2500 })
        return
      }
      warehouses.value = whRecords.map(w => ({ ...w, name: w.Name || w.name || w.identifier || '' }))
      const targetWh = warehouses.value.find(w => Number(w.id) === Number(po.warehouse?.id)) || warehouses.value[0]
      selectedWarehouse.value = targetWh
    } catch (err) {
      console.error('PO quick-select: warehouse load failed', err)
      toast({ message: 'Fehler beim Laden der Lager', type: 'is-danger', duration: 2500 })
      return
    } finally {
      isLoadingWarehouses.value = false
    }

    // Transition to scan step, mirroring confirmOrgSelection without the
    // double-toast (the PO load toast at the end is enough feedback).
    currentStep.value = 'scan'
    receiptLines.value = []
    globalLocatorId.value = null
    globalLocatorCode.value = null
    loadLocators()
  }

  isLoadingPOs.value = true
  try {
    const res = await $fetch(`/api/orders/${po.id}/order-line`, {
      headers: useRequestHeaders(['cookie'])
    })
    const orderLines = Array.isArray(res?.records) ? res.records : []
    const newReceiptLines = orderLines.map((l, idx) => {
      const remaining = Math.max(0, Number(l.QtyOrdered || 0) - Number(l.QtyDelivered || 0))
      return {
        productId: l.M_Product_ID?.id,
        productName: l.M_Product_ID?.identifier || l.Description || '',
        productValue: l.M_Product_ID?.Value || '',
        productSKU: l.M_Product_ID?.SKU || '',
        productUPC: l.M_Product_ID?.UPC || '',
        uomId: l.C_UOM_ID?.id || '100',
        uom: l.C_UOM_ID?.identifier || 'Each',
        qtyEntered: remaining > 0 ? remaining : Number(l.QtyOrdered || 0),
        movementQty: remaining > 0 ? remaining : Number(l.QtyOrdered || 0),
        locatorId: globalLocatorId.value || null,
        locatorCode: globalLocatorCode.value || null,
        line: (idx + 1) * 10,
        // Linkage so iDempiere updates QtyDelivered on the PO line:
        orderLineId: l.id
      }
    }).filter(l => l.productId)

    if (newReceiptLines.length === 0) {
      toast({ message: 'Bestellung hat keine Positionen', type: 'is-warning', duration: 2500 })
      return
    }

    receiptLines.value = newReceiptLines
    sourcePO.value = {
      id: po.id,
      documentNo: po.documentNo,
      partner: po.partner,
      partnerLocation: po.partnerLocation
    }
    closePOPicker()
    feedback.success()
    toast({
      message: `${newReceiptLines.length} Positionen aus ${po.documentNo} geladen`,
      type: 'is-success',
      duration: 2500
    })
  } catch (err) {
    console.error('Error loading PO lines:', err)
    toast({ message: 'Fehler beim Laden der PO-Positionen', type: 'is-danger', duration: 2500 })
  } finally {
    isLoadingPOs.value = false
  }
}

const clearSourcePO = () => {
  sourcePO.value = null
}

// Number pad
const openNumberPad = (index) => {
  editingLineIndex.value = index
  numberInput.value = ''
  showNumberPad.value = true
}

const closeNumberPad = () => {
  showNumberPad.value = false
  editingLineIndex.value = null
  numberInput.value = ''
  setTimeout(() => focusInput(), 100)
}

const appendNumber = (num) => { numberInput.value += String(num) }
const clearNumber = () => { numberInput.value = '' }
const backspaceNumber = () => { numberInput.value = numberInput.value.slice(0, -1) }

const confirmNumber = () => {
  if (editingLineIndex.value !== null) {
    const qty = Number(numberInput.value) || 0
    receiptLines.value[editingLineIndex.value].qtyEntered = qty
    receiptLines.value[editingLineIndex.value].movementQty = qty
  }
  closeNumberPad()
}

// Locator selector
const openLocatorSelector = (mode = 'all', lineIndex = null) => {
  locatorMode.value = mode
  editingLocatorLineIndex.value = lineIndex
  locatorScanQuery.value = ''
  selectedLocatorId.value = null
  selectedLocatorGroup.value = null
  showLocatorBrowser.value = false
  showLocatorSelector.value = true
  nextTick(() => {
    if (locatorScanInputRef.value) locatorScanInputRef.value.focus()
  })
}

const closeLocatorSelector = () => {
  showLocatorSelector.value = false
  selectedLocatorId.value = null
  editingLocatorLineIndex.value = null
  locatorScanQuery.value = ''
  selectedLocatorGroup.value = null
  showLocatorBrowser.value = false
  setTimeout(() => focusInput(), 100)
}

const openLocatorBrowser = async () => {
  showLocatorBrowser.value = true
  selectedLocatorGroup.value = null
  selectedLocatorId.value = null
  if (!availableLocators.value || availableLocators.value.length === 0) {
    await loadLocators()
  }
}

// Extract group prefix from a locator code (part before first '-')
const getLocatorGroup = (code) => {
  if (!code) return '—'
  const str = String(code).trim()
  const dashIdx = str.indexOf('-')
  return (dashIdx > 0 ? str.slice(0, dashIdx) : str).toUpperCase()
}

// Groups: [{ group: 'AA', count: 12 }, ...]
const locatorGroups = computed(() => {
  const map = new Map()
  for (const l of availableLocators.value) {
    const g = getLocatorGroup(l.code)
    map.set(g, (map.get(g) || 0) + 1)
  }
  return Array.from(map.entries())
    .map(([group, count]) => ({ group, count }))
    .sort((a, b) => a.group.localeCompare(b.group))
})

// Locators filtered by the currently drilled-in group
const locatorsInGroup = computed(() => {
  if (!selectedLocatorGroup.value) return []
  return availableLocators.value
    .filter(l => getLocatorGroup(l.code) === selectedLocatorGroup.value)
    .sort((a, b) => String(a.code).localeCompare(String(b.code)))
})

const openLocatorGroup = (group) => {
  selectedLocatorGroup.value = group
  selectedLocatorId.value = null
}

const backToLocatorGroups = () => {
  selectedLocatorGroup.value = null
  selectedLocatorId.value = null
}

const normalizeLocatorCode = (code) => {
  if (!code) return ''
  return code.replace(/\s*-\s*/g, '-').toLowerCase().trim()
}

const handleLocatorScan = () => {
  if (!locatorScanQuery.value.trim()) return
  const code = locatorScanQuery.value.trim()
  const normalizedInput = normalizeLocatorCode(code)
  locatorScanQuery.value = ''

  const locator = availableLocators.value.find(l => normalizeLocatorCode(l.code) === normalizedInput)

  if (locator) {
    applyLocatorSelection(locator)
  } else {
    // Try async API lookup
    $fetch('/api/mobile/locator-lookup', {
      method: 'POST',
      body: {
        search: code,
        warehouseId: selectedWarehouse.value?.id,
        organizationId: selectedOrganization.value?.id
      }
    }).then(data => {
      if (data?.id) {
        applyLocatorSelection({ id: data.id, code: data.code || data.Value })
      } else {
        toast({ message: 'Lagerplatz nicht gefunden', type: 'is-danger', duration: 2000 })
        feedback.error()
      }
    }).catch(() => {
      toast({ message: 'Lagerplatz nicht gefunden', type: 'is-danger', duration: 2000 })
      feedback.error()
    })
  }
}

const confirmLocatorSelection = () => {
  if (!selectedLocatorId.value) return
  const locator = availableLocators.value.find(l => l.id === selectedLocatorId.value)
  if (locator) applyLocatorSelection(locator)
}

const applyLocatorSelection = (locator) => {
  if (locatorMode.value === 'all') {
    const prevGlobalId = globalLocatorId.value
    globalLocatorId.value = locator.id
    globalLocatorCode.value = locator.code
    // Apply to every line that has no locator yet OR was still following the
    // previous global/preset locator — so changing the global overwrites the
    // preset that was auto-applied to already-scanned lines, while a deliberate
    // per-line override (a different locator) is preserved.
    receiptLines.value.forEach(line => {
      if (!line.locatorId || String(line.locatorId) === String(prevGlobalId)) {
        line.locatorId = locator.id
        line.locatorCode = locator.code
      }
    })
  } else if (locatorMode.value === 'single' && editingLocatorLineIndex.value !== null) {
    receiptLines.value[editingLocatorLineIndex.value].locatorId = locator.id
    receiptLines.value[editingLocatorLineIndex.value].locatorCode = locator.code
  }
  feedback.success()
  closeLocatorSelector()
}

// Remove line
const removeLine = (index) => {
  receiptLines.value.splice(index, 1)
}

// Clear all
const clearAll = () => {
  receiptLines.value = []
  globalLocatorId.value = null
  globalLocatorCode.value = null
  capturedImages.value = []
  labelCount.value = 1
  selectedArticleLineIds.value = new Set()
  sourcePO.value = null
  error.value = ''
  duplicates.value = null
  duplicateSearchTerm.value = ''
  focusInput()
}

// Camera / image capture
const startCamera = async () => {
  try {
    showCamera.value = true
    await nextTick()
    stream.value = await navigator.mediaDevices.getUserMedia({
      video: { facingMode: 'environment', width: { ideal: 1920 }, height: { ideal: 1080 } }
    })
    if (videoRef.value) videoRef.value.srcObject = stream.value
  } catch (err) {
    console.error('Camera error:', err)
    toast({ message: 'Kamera nicht verfügbar', type: 'is-danger', duration: 2000 })
    showCamera.value = false
  }
}

const stopCamera = () => {
  if (stream.value) {
    stream.value.getTracks().forEach(t => t.stop())
    stream.value = null
  }
  showCamera.value = false
  focusInput()
}

const captureImage = () => {
  if (!videoRef.value || !canvasRef.value) return
  const video = videoRef.value
  const canvas = canvasRef.value
  const maxDim = 2000
  let w = video.videoWidth
  let h = video.videoHeight
  if (w > maxDim || h > maxDim) {
    const s = maxDim / Math.max(w, h)
    w = Math.round(w * s)
    h = Math.round(h * s)
  }
  canvas.width = w
  canvas.height = h
  canvas.getContext('2d').drawImage(video, 0, 0, w, h)
  capturedImages.value.push({ id: Date.now(), data: canvas.toDataURL('image/jpeg', 0.92) })
  feedback.success()
}

const removeImage = (id) => {
  capturedImages.value = capturedImages.value.filter(img => img.id !== id)
}

const openImageModal = (url) => {
  selectedImage.value = url
  showImageModal.value = true
}

const closeImageModal = () => {
  showImageModal.value = false
  selectedImage.value = null
  focusInput()
}

// Upload captured images as Strapi attachments on the M_InOut record
const uploadAttachments = async (inOutId, inOutUid) => {
  if (capturedImages.value.length === 0 || !inOutId) return
  try {
    const attachmentRecord = await $fetch(`/api/attachments/PO_InOut/${inOutId}`, {
      headers: useRequestHeaders(['cookie'])
    })
    let strapiAttachmentId = attachmentRecord?.Strapi_Attachment_ID
    if (!strapiAttachmentId) {
      const createRes = await $fetch(`/api/attachments/PO_InOut/${inOutId}`, {
        method: 'POST',
        headers: useRequestHeaders(['cookie']),
        body: { uid: inOutUid }
      })
      strapiAttachmentId = createRes?.Strapi_Attachment_ID
    }
    if (!strapiAttachmentId) return

    for (const image of capturedImages.value) {
      const blob = await (await fetch(image.data)).blob()
      const file = new File([blob], `receipt-${Date.now()}.jpg`, { type: 'image/jpeg' })
      const formData = new FormData()
      formData.append('field', 'attachment')
      formData.append('ref', 'api::ad-attachment.ad-attachment')
      formData.append('refId', strapiAttachmentId)
      formData.append('files', file)
      formData.append('fileInfo', JSON.stringify({
        caption: String(inOutId),
        alternativeText: String(inOutUid || inOutId)
      }))
      await fetch(config.public.strapi + '/media-api/upload', {
        method: 'POST',
        headers: { Authorization: 'Bearer ' + config.public.strapitoken },
        body: formData
      })
    }
  } catch (err) {
    console.error('Error uploading attachments:', err)
  }
}

// Mode switch: create (default) vs lookup (view existing receipt)
const setPageMode = (mode) => {
  if (mode === pageMode.value) return
  pageMode.value = mode
  if (mode === 'lookup') {
    lookupQuery.value = ''
    lookupError.value = ''
    nextTick(() => lookupInputRef.value?.focus())
  } else {
    lookupResult.value = null
    lookupLines.value = []
    lookupAttachments.value = []
    lookupQuery.value = ''
    lookupError.value = ''
    focusInput()
  }
}

const formatGermanDateTime = (iso) => {
  if (!iso) return ''
  const d = new Date(iso)
  if (isNaN(d.getTime())) return String(iso).substring(0, 19).replace('T', ' ')
  const dd = String(d.getDate()).padStart(2, '0')
  const mm = String(d.getMonth() + 1).padStart(2, '0')
  const yyyy = d.getFullYear()
  const hh = String(d.getHours()).padStart(2, '0')
  const mi = String(d.getMinutes()).padStart(2, '0')
  return `${dd}.${mm}.${yyyy} ${hh}:${mi}`
}

const lookupTotalQty = computed(() =>
  lookupLines.value.reduce((sum, l) => sum + (Number(l.qty) || 0), 0)
)

const loadLookupAttachments = async (inOutId) => {
  try {
    const attachmentRecord = await $fetch(`/api/attachments/PO_InOut/${inOutId}`, {
      headers: useRequestHeaders(['cookie'])
    })
    const documentId = attachmentRecord?.Strapi_Attachment_documentId
    if (!documentId) {
      lookupAttachments.value = []
      return
    }
    const files = await $fetch(`/api/attachments/PO_InOut/${documentId}/files`, {
      headers: useRequestHeaders(['cookie'])
    })
    lookupAttachments.value = (Array.isArray(files) ? files : []).map(f => ({
      id: f.id,
      name: f.name,
      mime: f.mime,
      url: config.public.strapi + '/files-api/' + f.hash + f.ext,
      isImage: (f.mime || '').startsWith('image/')
    }))
  } catch (err) {
    console.error('Load attachments error:', err)
    lookupAttachments.value = []
  }
}

const searchReceipt = async () => {
  const q = (lookupQuery.value || '').trim()
  if (!q) return
  lookupQuery.value = ''
  isLookupLoading.value = true
  lookupError.value = ''
  lookupResult.value = null
  lookupLines.value = []
  lookupAttachments.value = []

  try {
    const res = await $fetch('/api/inouts/search', {
      headers: useRequestHeaders(['cookie']),
      params: { documentNo: q }
    })

    if (res?.records && res.records.length > 0) {
      const record = res.records[0]
      lookupResult.value = record
      const rawLines = record.M_InOutLine || record.m_inoutline || []
      lookupLines.value = rawLines.map(line => ({
        line: line.Line,
        productId: line.M_Product_ID?.id,
        productName: line.M_Product_ID?.identifier || line.M_Product_ID?.Name || '',
        productValue: line.M_Product_ID?.Value || '',
        qty: Math.abs(line.MovementQty || 0),
        uom: line.C_UOM_ID?.identifier || line.C_UOM_ID?.Name || '',
        locator: line.M_Locator_ID?.identifier || line.M_Locator_ID?.Value || ''
      }))
      await loadLookupAttachments(record.id)
      feedback.success()
    } else {
      lookupError.value = `Wareneingang nicht gefunden: ${q}`
      feedback.error()
    }
  } catch (err) {
    console.error('Lookup error:', err)
    lookupError.value = err?.data?.message || 'Fehler bei der Suche'
    feedback.error()
  } finally {
    isLookupLoading.value = false
    nextTick(() => lookupInputRef.value?.focus())
  }
}

const clearLookup = () => {
  lookupResult.value = null
  lookupLines.value = []
  lookupAttachments.value = []
  lookupError.value = ''
  lookupQuery.value = ''
  nextTick(() => lookupInputRef.value?.focus())
}

const openLookupImage = (url) => {
  lookupSelectedImage.value = url
  showLookupImageModal.value = true
}

const closeLookupImage = () => {
  lookupSelectedImage.value = null
  showLookupImageModal.value = false
  nextTick(() => lookupInputRef.value?.focus())
}

// Re-print labels for a looked-up receipt
const reprintLookupLabels = async () => {
  const docNo = lookupResult.value?.DocumentNo
  if (!docNo) return
  // Temporarily set the org name so the helper reads it correctly
  const orig = selectedOrganization.value
  const orgName = lookupResult.value?.AD_Org_ID?.companyname
    || lookupResult.value?.AD_Org_ID?.identifier
    || lookupResult.value?.AD_Org_ID?.Name
    || orig?.name
    || ''
  selectedOrganization.value = { ...(orig || {}), name: orgName }
  try {
    await printReceiptLabels(docNo, labelCount.value, selectedPrinter.value)
  } finally {
    selectedOrganization.value = orig
  }
}

// Generate CODE128 barcode as data URL (PNG)
const generateBarcodeDataUrl = (code) => {
  if (!process.client || !JsBarcodeLib || !code) return null
  try {
    const canvasElem = document.createElement('canvas')
    canvasElem.width = 400
    canvasElem.height = 120
    JsBarcodeLib(canvasElem, String(code), {
      format: 'CODE128',
      lineColor: '#000',
      displayValue: false,
      width: 2,
      height: 80,
      margin: 0
    })
    return canvasElem.toDataURL('image/png')
  } catch (e) {
    console.warn('Barcode generation failed:', e)
    return null
  }
}

// Generate + send receipt label PDF to the chosen printer
const printReceiptLabels = async (documentNo, count, printer) => {
  if (!process.client || !documentNo) return
  try {
    if (!jsPDFLib) {
      const mod = await import('jspdf')
      jsPDFLib = mod.jsPDF
    }
    if (!JsBarcodeLib) {
      const mod = await import('jsbarcode')
      JsBarcodeLib = mod.default
    }
  } catch (e) {
    toast({ message: 'PDF-/Barcode-Bibliothek konnte nicht geladen werden', type: 'is-warning', duration: 2000 })
    return
  }

  const printerFormats = {
    'labelprinter-1': 'a8',
    'labelprinter-2': 'a8',
    'labelprinter-3': [75, 60],
    'labelprinter-4': [150, 100],
    'labelprinter-5': [150, 100],
    'labelprinter-6': [54, 29]
  }
  const pageFormat = printerFormats[printer] || [75, 60]

  const doc = new jsPDFLib({
    orientation: 'l', unit: 'mm', format: pageFormat,
    putOnlyUsedFonts: true, compress: true
  })

  const today = new Date()
  const dd = String(today.getDate()).padStart(2, '0')
  const mm = String(today.getMonth() + 1).padStart(2, '0')
  const yyyy = today.getFullYear()
  const dateStr = `${dd}.${mm}.${yyyy}`
  const orgName = selectedOrganization.value?.name || ''
  const total = Math.max(1, Number(count) || 1)
  const isLarge = Array.isArray(pageFormat) && pageFormat[0] === 150
  const isSmall = Array.isArray(pageFormat) && pageFormat[0] === 54
  const isMid = Array.isArray(pageFormat) && pageFormat[0] === 75
  const barcodeImg = generateBarcodeDataUrl(documentNo)

  for (let i = 1; i <= total; i++) {
    if (i > 1) doc.addPage()
    if (isLarge) {
      // 150x100mm
      doc.setFontSize(28); doc.setFont(undefined, 'bold')
      doc.text('WARENEINGANG', 8, 18)
      doc.setFontSize(22)
      doc.text(String(documentNo), 8, 32)
      doc.setFontSize(16); doc.setFont(undefined, 'normal')
      doc.text(`Datum: ${dateStr}`, 8, 46)
      doc.text(orgName.substring(0, 45), 8, 56)
      if (barcodeImg) doc.addImage(barcodeImg, 'image/png', 25, 62, 100, 22)
      doc.setFontSize(12)
      doc.text(String(documentNo), 60, 90, { align: 'center' })
      if (total > 1) {
        doc.setFontSize(28); doc.setFont(undefined, 'bold')
        doc.text(`${i}/${total}`, 128, 94)
      }
    } else if (isMid) {
      // 75x60mm (labelprinter-3)
      doc.setFontSize(16); doc.setFont(undefined, 'bold')
      doc.text('WARENEINGANG', 4, 9)
      doc.setFontSize(13)
      doc.text(String(documentNo), 4, 17)
      doc.setFontSize(10); doc.setFont(undefined, 'normal')
      doc.text(`Datum: ${dateStr}`, 4, 24)
      doc.text(orgName.substring(0, 30), 4, 30)
      if (barcodeImg) doc.addImage(barcodeImg, 'image/png', 5, 33, 65, 16)
      doc.setFontSize(8)
      doc.text(String(documentNo), 37, 54, { align: 'center' })
      if (total > 1) {
        doc.setFontSize(14); doc.setFont(undefined, 'bold')
        doc.text(`${i}/${total}`, 64, 58)
      }
    } else if (isSmall) {
      // 54x29mm (labelprinter-6)
      doc.setFontSize(8); doc.setFont(undefined, 'bold')
      doc.text('WE', 1, 4)
      doc.text(String(documentNo).substring(0, 16), 1, 8)
      doc.setFontSize(6); doc.setFont(undefined, 'normal')
      doc.text(dateStr, 1, 12)
      doc.text(orgName.substring(0, 20), 1, 16)
      if (barcodeImg) doc.addImage(barcodeImg, 'image/png', 5, 18, 44, 9)
      if (total > 1) {
        doc.setFontSize(8); doc.setFont(undefined, 'bold')
        doc.text(`${i}/${total}`, 50, 27)
      }
    } else {
      // a8 / fallback (~74x52mm)
      doc.setFontSize(14); doc.setFont(undefined, 'bold')
      doc.text('WARENEINGANG', 3, 8)
      doc.setFontSize(11)
      doc.text(String(documentNo), 3, 15)
      doc.setFontSize(9); doc.setFont(undefined, 'normal')
      doc.text(`Datum: ${dateStr}`, 3, 21)
      doc.text(orgName.substring(0, 28), 3, 26)
      if (barcodeImg) doc.addImage(barcodeImg, 'image/png', 9, 29, 55, 14)
      doc.setFontSize(7)
      doc.text(String(documentNo), 37, 46, { align: 'center' })
      if (total > 1) {
        doc.setFontSize(12); doc.setFont(undefined, 'bold')
        doc.text(`${i}/${total}`, 63, 50)
      }
    }
  }

  const fileContent = doc.output('dataurlstring')?.replace('data:application/pdf;filename=generated.pdf;base64,', '')

  try {
    await $fetch(`/api/print/${printer}/locator`, {
      method: 'POST',
      body: {
        pathName: 'inout-labels',
        fileName: `receipt-label-${documentNo}.pdf`,
        fileContent: fileContent
      }
    })
    toast({ message: `${total} Etikett(en) gedruckt (${printer})`, type: 'is-success', duration: 2000 })
  } catch (err) {
    console.error('Error printing labels:', err)
    toast({ message: `Fehler beim Drucken (${printer})`, type: 'is-warning', duration: 2000 })
  }
}

// --- Article label printing (one label per qty unit; mirrors desktop "Print Labels Server Only") ---

const printerToLabelEntryId = (printer) => {
  // labelprinter-1..6 → a..f (matches server-side mapping in /api/print/product)
  const map = {
    'labelprinter-1': 'a',
    'labelprinter-2': 'b',
    'labelprinter-3': 'c',
    'labelprinter-4': 'd',
    'labelprinter-5': 'e',
    'labelprinter-6': 'f'
  }
  return map[printer] || 'b'
}

const isArticleLineSelected = (productId) => selectedArticleLineIds.value.has(productId)

const toggleArticleLine = (productId) => {
  const next = new Set(selectedArticleLineIds.value)
  if (next.has(productId)) next.delete(productId)
  else next.add(productId)
  selectedArticleLineIds.value = next
}

const allArticleLinesSelected = computed(() => {
  return receiptLines.value.length > 0 &&
    receiptLines.value.every(l => selectedArticleLineIds.value.has(l.productId))
})

const someArticleLinesSelected = computed(() => selectedArticleLineIds.value.size > 0)

const toggleAllArticleLines = () => {
  if (allArticleLinesSelected.value) {
    selectedArticleLineIds.value = new Set()
  } else {
    selectedArticleLineIds.value = new Set(receiptLines.value.map(l => l.productId))
  }
}

const articleLabelTotalCount = computed(() => {
  return receiptLines.value
    .filter(l => selectedArticleLineIds.value.has(l.productId))
    .reduce((sum, l) => sum + Math.max(0, Number(l.qtyEntered) || 0), 0)
})

const printSelectedArticleLabels = async (opts = {}) => {
  if (!process.client) return
  if (articleLabelPrinting.value) return
  if (selectedArticleLineIds.value.size === 0) {
    if (!opts.silent) {
      toast({ message: 'Bitte mindestens eine Position auswählen', type: 'is-warning', duration: 2000 })
    }
    return
  }
  try {
    if (!JsBarcodeLib) {
      const mod = await import('jsbarcode')
      JsBarcodeLib = mod.default
    }
  } catch (e) {
    toast({ message: 'Barcode-Bibliothek konnte nicht geladen werden', type: 'is-warning', duration: 2000 })
    return
  }

  articleLabelPrinting.value = true
  try {
    const labelPrinterId = printerToLabelEntryId(articleLabelPrinter.value)
    const orgId = selectedOrganization.value?.id ?? null
    const orgName = selectedOrganization.value?.name ?? null

    const entries = receiptLines.value
      .filter(l => selectedArticleLineIds.value.has(l.productId))
      .map(l => {
        // Prefer Value (Artikelnr.), fall back through SKU / productId so the
        // barcode is never empty — jsPDF addImage on the server will throw if
        // labelBarcode is null, which silently kills the whole print job.
        const barcodeSeed = String(l.productValue || l.productSKU || l.productId || '0000')
        return {
          qtyEntered: Math.max(1, Number(l.qtyEntered) || 1),
          labelPrinter: articleLabelPrinter.value,
          labelPrinterId,
          product: l.productName || '',
          productId: l.productId,
          productSKU: l.productSKU || '',
          productASIN: '',
          productUPC: l.productUPC || '',
          productValue: l.productValue || '',
          organization: orgName,
          organizationId: orgId,
          locatorX: '',
          locatorY: '',
          locatorZ: '',
          labelBarcode: generateBarcodeDataUrl(barcodeSeed)
        }
      })
      .filter(e => e.labelBarcode) // drop any line that still couldn't produce a barcode

    if (entries.length === 0) {
      if (!opts.silent) {
        toast({ message: 'Keine Positionen zum Drucken', type: 'is-warning', duration: 2000 })
      }
      return
    }

    const grouped = { [labelPrinterId]: entries }
    const stamp = date.now().replace(/\-|\:/g, '_').replace(' ', '-LABELS-')

    const res = await $fetch('/api/print/product', {
      method: 'POST',
      headers: useRequestHeaders(['cookie']),
      body: {
        pathName: `inout-labels/${new Date().getFullYear()}`,
        fileName: `${stamp}.pdf`,
        labelEntries: Object.entries(grouped)
      }
    })

    if (Number(res?.contents?.length ?? 0) >= 1) {
      const total = entries.reduce((sum, e) => sum + Number(e.qtyEntered), 0)
      // Deselect the printed lines: the submit flow auto-prints whatever is
      // still selected, so leaving the selection in place would print every
      // label a second time when the receipt is completed. (On a failed print
      // the selection stays, so completing the receipt retries the labels.)
      if (res?.printOk !== false) {
        selectedArticleLineIds.value = new Set()
      }
      toast({
        message: `${total} Artikel-Etikett(en) gedruckt (${articleLabelPrinter.value})`,
        type: 'is-success',
        duration: 2500
      })
    } else {
      toast({ message: 'Etiketten konnten nicht gedruckt werden', type: 'is-danger', duration: 2500 })
    }
  } catch (err) {
    console.error('Article label print error:', err)
    toast({ message: 'Fehler beim Drucken der Artikel-Etiketten', type: 'is-danger', duration: 2500 })
  } finally {
    articleLabelPrinting.value = false
  }
}

// Check if ready to submit
const canSubmit = computed(() => {
  if (receiptLines.value.length === 0) return false
  // All lines must have a locator and a positive quantity (the number pad
  // allows confirming an empty/0 value, which would post a 0-qty line)
  return receiptLines.value.every(line => line.locatorId && Number(line.qtyEntered) > 0)
})

// Submit receipt
const submitReceipt = async () => {
  if (!canSubmit.value) {
    toast({ message: 'Alle Positionen brauchen einen Lagerplatz', type: 'is-warning', duration: 2000 })
    return
  }

  submitting.value = true
  error.value = ''

  try {
    if (!docTypeId.value) {
      await fetchDocType()
      if (!docTypeId.value) throw new Error('Dokumenttyp konnte nicht geladen werden')
    }

    if (!defaultPartnerLocationId.value) {
      await fetchDefaultPartnerLocation()
      if (!defaultPartnerLocationId.value) throw new Error('Partner-Standort konnte nicht geladen werden')
    }

    const orgId = selectedOrganization.value.id
    const whId = selectedWarehouse.value.id

    // Free receive (no source PO): put the org's linked c_bpartner on the
    // receipt instead of the Dummy partner — only when both the partner AND
    // one of its locations resolve; otherwise full Dummy fallback so the hot
    // path never breaks. PO receives keep the PO vendor.
    let orgPartner = { partnerId: null, locationId: null }
    if (!sourcePO.value?.id) {
      try {
        orgPartner = await resolveOrgPartnerCached(orgId)
      } catch (err) {
        console.warn('[Receive] Org partner resolution failed, using default partner:', err)
      }
    }
    const useOrgPartner = !sourcePO.value?.id && orgPartner.partnerId && orgPartner.locationId

    // Build inout lines
    const inOutLines = receiptLines.value.map((line, index) => {
      const entry = {
        line: (index + 1) * 10,
        isActive: true,
        movementQty: line.movementQty,
        qtyEntered: line.qtyEntered,
        targetQty: 0,
        scrappedQty: 0,
        pickedQty: 0,
        confirmedQty: 0,
        isDescription: false,
        isInvoiced: false,
        M_Product_ID: { id: line.productId },
        C_UOM_ID: { id: line.uomId },
        M_Locator_ID: { id: line.locatorId },
        // Link back to the PO line so iDempiere bumps QtyDelivered on the PO
        ...(line.orderLineId ? { C_OrderLine_ID: { id: line.orderLineId, tableName: 'C_OrderLine' } } : {})
      }
      return entry
    })

    const res = await $fetch('/api/inouts/store', {
      method: 'POST',
      headers: useRequestHeaders(['cookie']),
      body: {
        organizationId: orgId,
        isActive: true,
        isApproved: true,
        processed: false,
        isSOTrx: false,
        isPrinted: false,
        dateAcct: date.now('date'),
        dateOrdered: date.now('date'),
        movementDate: date.now('date'),
        poReference: '',
        freightAmt: 0,
        chargeAmt: 0,
        sendEMail: false,
        noPackages: 0,
        isInTransit: false,
        isInDispute: false,
        volume: 0,
        weight: 0,
        isDropShip: false,
        processedOn: 0,
        isAlternateReturnAddress: false,
        movementTypeId: 'V+',
        docTypeId: docTypeId.value,
        partnerId: sourcePO.value?.partner?.id || (useOrgPartner ? orgPartner.partnerId : DEFAULT_PARTNER_ID),
        partnerLocationId: sourcePO.value?.partnerLocation?.id || (useOrgPartner ? orgPartner.locationId : defaultPartnerLocationId.value),
        warehouseId: whId,
        ...(sourcePO.value?.id ? { orderId: sourcePO.value.id } : {}),
        deliveryRuleId: 'A',
        freightCostRuleId: 'I',
        deliveryViaRuleId: 'D',
        priorityRuleId: '5',
        docStatusId: 'DR',
        salesRepId: userId.value,
        inOutLines: inOutLines
      }
    })

    if (res && (Number(res.status) === 200 || res.id)) {
      // Complete the receipt (DR -> CO)
      let receiptCompleted = false
      try {
        await $fetch(`/api/inouts/${res.id}/document-action`, {
          method: 'POST',
          headers: useRequestHeaders(['cookie']),
          body: { documentAction: 'CO' }
        })
        receiptCompleted = true
      } catch (docErr) {
        console.warn('Document action failed (receipt still created):', docErr)
      }

      // Close the source PO (CO -> CL) — mirrors the desktop receipts/edit flow
      // which closes the linked PO right after the receipt is completed. Only
      // attempted when (a) the receipt actually completed and (b) we know the
      // source PO. Failure is non-fatal: receipt is already CO, PO can be
      // closed manually if needed.
      if (receiptCompleted && sourcePO.value?.id) {
        try {
          await $fetch(`/api/orders/${sourcePO.value.id}/document-action`, {
            method: 'POST',
            headers: useRequestHeaders(['cookie']),
            body: { documentAction: 'CL' }
          })
        } catch (poErr) {
          console.warn('PO close failed (receipt still completed):', poErr)
        }
      }

      // Re-fetch to get final DocumentNo (assigned on completion) and UID
      let finalDocNo = res.DocumentNo || res.documentNo || res.id
      let finalUid = res.UID || res.uid || res.Record_UU || ''
      try {
        const fullRes = await $fetch(`/api/inouts/${res.id}`, {
          headers: useRequestHeaders(['cookie'])
        })
        if (fullRes) {
          finalDocNo = fullRes.DocumentNo || fullRes.documentNo || finalDocNo
          finalUid = fullRes.UID || fullRes.uid || fullRes.Record_UU || finalUid
        }
      } catch (e) {
        console.warn('Could not re-fetch inout for label/upload:', e)
      }

      // Run uploads + label printing in parallel; failures are non-blocking.
      // Article labels print when the user selected at least one line in the
      // "Artikel-Etiketten" section (mirrors desktop "Print Labels Server Only").
      await Promise.allSettled([
        uploadAttachments(res.id, finalUid),
        printLabel.value
          ? printReceiptLabels(finalDocNo, labelCount.value, selectedPrinter.value)
          : Promise.resolve(),
        selectedArticleLineIds.value.size > 0
          ? printSelectedArticleLabels({ silent: false })
          : Promise.resolve()
      ])

      // Final page: success overlay with optional task (manual time) entry.
      // Snapshot org info now — clearAll()/changeOrg may reset it later.
      completedReceipt.value = {
        id: res.id,
        documentNo: finalDocNo,
        orgId: orgId,
        orgName: selectedOrganization.value?.name || '',
        lineCount: receiptLines.value.length
      }
      taskHours.value = ''
      taskMinutes.value = ''
      taskCreatedDocNo.value = null
      clearAll()
    } else {
      throw new Error(res?.message || 'Fehler beim Erstellen')
    }
  } catch (err) {
    console.error('Submit error:', err)
    error.value = err?.data?.message || err?.message || 'Fehler beim Erstellen des Wareneingangs'
    toast({
      message: error.value,
      type: 'is-danger',
      duration: 5000
    })
  } finally {
    submitting.value = false
  }
}

// --- Post-completion task (mirrors pages/mobile/tasks.vue) -------------------

// Format date for iDempiere: yyyy-MM-dd'T'HH:mm:ss'Z' (no milliseconds)
const toIdempiereDate = (d) => d.toISOString().replace(/\.\d{3}Z$/, 'Z')

// Pick the hourly rate out of a c_bpartner record, trying every case variant
// iDempiere might return (OData responses are case-preserving but models vary).
const extractHourlyRate = (record) => {
  if (!record || typeof record !== 'object') return null
  const candidates = [
    record.fulfillment_service_hourly_rate,
    record.Fulfillment_Service_Hourly_Rate,
    record.FULFILLMENT_SERVICE_HOURLY_RATE
  ]
  if (candidates.every(v => v === undefined)) {
    for (const k of Object.keys(record)) {
      if (k.toLowerCase() === 'fulfillment_service_hourly_rate') {
        candidates.push(record[k])
        break
      }
    }
  }
  for (const raw of candidates) {
    const n = Number(raw)
    if (Number.isFinite(n) && n > 0) return n
  }
  return null
}

// Resolve ad_org -> linked c_bpartner via the dedicated endpoint, then read its
// hourly rate. Falls back to 33 EUR (standard chain, see tasks.vue).
const resolveOrgBpartner = async (orgId) => {
  if (!orgId) return { partnerId: null, rate: 33 }
  try {
    const res = await $fetch(`/api/admin/organizations/${orgId}/bpartner`, {
      headers: useRequestHeaders(['cookie'])
    })
    if (!res?.id) return { partnerId: null, rate: 33 }
    return { partnerId: res.id, rate: extractHourlyRate(res) ?? 33 }
  } catch (err) {
    console.warn('[Receive] Could not resolve org bpartner:', err)
    return { partnerId: null, rate: 33 }
  }
}

// Per-org cache of { partnerId, rate, locationId } so the receipt and the
// post-completion task share one resolution (org -> linked c_bpartner -> its
// first location). Only cached once the partner actually resolved, so a
// transient failure can be retried. locationId stays null when the partner
// has no location — callers must then fall back to the Dummy partner entirely
// (a location must always belong to the partner sent with it).
const orgPartnerCache = ref({})
const resolveOrgPartnerCached = async (orgId) => {
  if (!orgId) return { partnerId: null, rate: 33, locationId: null }
  if (orgPartnerCache.value[orgId]) return orgPartnerCache.value[orgId]
  const { partnerId, rate } = await resolveOrgBpartner(orgId)
  let locationId = null
  if (partnerId) {
    try {
      const res = await $fetch(`/api/partners/partners/${partnerId}/locations`, {
        headers: useRequestHeaders(['cookie'])
      })
      locationId = res?.records?.[0]?.id ?? null
    } catch (err) {
      console.warn('[Receive] Could not fetch org partner location:', err)
    }
  }
  const resolved = { partnerId, rate, locationId }
  if (partnerId) orgPartnerCache.value[orgId] = resolved
  return resolved
}

// "Fertig" must never silently discard an entered duration: if time was typed
// but the task wasn't created yet, create it instead of closing — the overlay
// then shows the "Aufgabe … erstellt" state and the next tap closes.
const closeCompletedOverlay = () => {
  if (creatingTask.value) return
  if (completedReceipt.value && !taskCreatedDocNo.value && taskTotalMinutes.value > 0) {
    createReceiptTask()
    return
  }
  completedReceipt.value = null
  taskCreatedDocNo.value = null
  focusInput()
}

// Create a completed task (R_Request) linked to the just-created receipt, with
// the manually entered time. Same summary/billing shape as a mobile task stop:
// [TASK] + [START/END/DURATION] + [Zeitabrechnung], qtySpent in minutes,
// requestAmt = rate × hours.
const createReceiptTask = async () => {
  if (creatingTask.value || !completedReceipt.value) return
  const durationMin = taskTotalMinutes.value
  if (durationMin <= 0) {
    toast({ message: 'Bitte Zeit eingeben (Stunden/Minuten)', type: 'is-warning', duration: 2000 })
    return
  }
  creatingTask.value = true
  try {
    const rc = completedReceipt.value
    const { partnerId, rate } = await resolveOrgPartnerCached(rc.orgId)
    const requestAmt = Math.round((durationMin / 60) * rate * 100) / 100

    const end = new Date()
    const start = new Date(end.getTime() - durationMin * 60000)
    const h = Math.floor(durationMin / 60)
    const m = durationMin % 60
    const rateStr = Number(rate).toFixed(2).replace('.', ',') + ' €/h'
    const amountStr = Number(requestAmt).toFixed(2).replace('.', ',') + ' €'

    let summary = `[TASK] Wareneingang | ${rc.orgName}`
    summary += `\nWareneingang: ${rc.documentNo} (${rc.lineCount} Positionen)`
    summary += `\n[START:${toIdempiereDate(start)}]`
    summary += `\n[END:${toIdempiereDate(end)}]`
    summary += `\n[DURATION:${h > 0 ? h + 'h ' : ''}${m}m 0s]`
    summary += `\n\n[Zeitabrechnung]`
    summary += `\nZeit erfasst: ${h}h ${m}min`
    summary += `\nStundensatz: ${rateStr}`
    summary += `\nBerechneter Betrag: ${amountStr}`

    const res = await $fetch('/api/requests/requests/store', {
      method: 'POST',
      headers: useRequestHeaders(['cookie']),
      body: {
        organizationId: rc.orgId,
        isActive: true,
        requestAmt,
        summary,
        isEscalated: false,
        dateLastAction: toIdempiereDate(end),
        processed: false,
        isSelfService: false,
        isInvoiced: false,
        qtySpent: durationMin,
        qtyInvoiced: 0,
        priorityId: '5',
        dueTypeId: '5',
        salesRepId: userId.value,
        userId: userId.value,
        ...(partnerId ? { partnerId } : {}),
        requestTypeId: 1000001,
        priorityUserId: '5',
        confidentialTypeId: 'I',
        confidentialTypeEntryId: 'I',
        roleId: roleId.value,
        nextActionId: 'F',
        startTime: toIdempiereDate(start),
        startDate: toIdempiereDate(start),
        endTime: toIdempiereDate(end),
        endDate: toIdempiereDate(end),
        inOutId: rc.id
      }
    })

    if (res && (Number(res.status) === 200 || res.id)) {
      // store.post.ts doesn't forward isComplete — flag it via update (non-fatal)
      try {
        await $fetch('/api/requests/requests/update', {
          method: 'PUT',
          headers: useRequestHeaders(['cookie']),
          body: { id: res.id, organizationId: rc.orgId, isComplete: true }
        })
      } catch (e) {
        console.warn('Task complete-flag update failed:', e)
      }
      taskCreatedDocNo.value = res.DocumentNo || res.documentNo || String(res.id)
      feedback.success()
    } else {
      throw new Error(res?.message || 'Fehler beim Erstellen der Aufgabe')
    }
  } catch (err) {
    console.error('Create receipt task error:', err)
    toast({
      message: err?.data?.message || err?.message || 'Fehler beim Erstellen der Aufgabe',
      type: 'is-danger',
      duration: 4000
    })
  } finally {
    creatingTask.value = false
  }
}

const goBack = () => {
  if (currentStep.value === 'scan' && receiptLines.value.length > 0) {
    if (!confirm('Ungespeicherte Positionen vorhanden. Zurück?')) return
  }
  if (hiddenScannerInput.value) hiddenScannerInput.value.blur()
  router.push('/mobile')
}

const changeOrg = () => {
  if (receiptLines.value.length > 0) {
    if (!confirm('Ungespeicherte Positionen gehen verloren. Fortfahren?')) return
  }
  currentStep.value = 'org'
  receiptLines.value = []
  globalLocatorId.value = null
  globalLocatorCode.value = null
  selectedOrganization.value = null
  selectedWarehouse.value = null
  warehouses.value = []
  // Also drop the PO / capture context — otherwise the next receipt for the
  // NEW org is still submitted with the old PO's orderId/partner and closes
  // that PO on completion.
  sourcePO.value = null
  capturedImages.value = []
  selectedArticleLineIds.value = new Set()
  duplicates.value = null
  duplicateSearchTerm.value = ''
  error.value = ''
}

// Persist printer + label-print preferences across sessions
watch(selectedPrinter, (v) => {
  if (process.client && v) localStorage.setItem('logship_receive_label_printer', v)
})
watch(printLabel, (v) => {
  if (process.client) localStorage.setItem('logship_receive_print_label', v ? '1' : '0')
})
watch(articleLabelPrinter, (v) => {
  if (process.client && v) localStorage.setItem('logship_receive_article_label_printer', v)
})

// Login no longer writes a logship_organizations cookie, so we fetch on mount.
// The mobile endpoint returns a trimmed [{ id, name }] list scoped by the
// bearer token's role; throws on real failure (no silent empty responses).
const ensureOrganizationsLoaded = async () => {
  if (Array.isArray(organizations.value) && organizations.value.length > 0) return
  try {
    const res = await $fetch('/api/mobile/organizations', {
      headers: useRequestHeaders(['cookie'])
    })
    if (Array.isArray(res) && res.length > 0) {
      organizations.value = res
    } else {
      console.warn('[Receive] Organizations endpoint returned empty list')
    }
  } catch (err) {
    console.error('[Receive] Could not load organizations:', err?.data ?? err)
  }
}

// Lifecycle
// Arriving from /mobile/product "Wareneingang" with a product to receive:
// auto-resolve its org + warehouse (mirrors selectPO's org-step shortcut), jump
// straight to the scan step and add the product to a fresh receipt. Falls back to
// the normal org picker if the org isn't available or no product was carried over.
const autoStartForProduct = async () => {
  // Snapshot every query value up front, THEN clear the URL query — so this
  // single clicked article can never be replayed if the page is re-mounted /
  // re-activated, and so it can't bleed into a later manually-started receipt.
  const pValue = String(route.query.productValue || '').trim()
  const pId = Number(route.query.productId || 0)
  const qOrgIdRaw = route.query.orgId
  const qOrgName = String(route.query.orgName || '').trim()
  const qWarehouseId = route.query.warehouseId
  if (!pValue && !(pId > 0)) return
  router.replace({ path: '/mobile/receive', query: {} }).catch(() => {})

  // Clean slate: arriving from /mobile/product always starts a BRAND-NEW receipt.
  // Never inherit lines / locator / source-PO / images / selections from a prior
  // session or a kept-alive instance — only the just-clicked article is preset.
  searchQuery.value = ''
  receiptLines.value = []
  sourcePO.value = null
  globalLocatorId.value = null
  globalLocatorCode.value = null
  selectedArticleLineIds.value = new Set()
  capturedImages.value = []
  labelCount.value = 1
  error.value = ''
  duplicates.value = null
  duplicateSearchTerm.value = ''

  // Remember the carried article up front so it's never lost — if any resolution step
  // below bails, the user lands on the org picker and confirmOrgSelection adds it.
  // The id is the source of truth; the value is only a fallback.
  pendingReceiveProductId.value = pId > 0 ? pId : null
  pendingReceiveProductValue.value = pValue || null
  await ensureOrganizationsLoaded()
  // Resolve the org: prefer the product's org, else fall back to the session org
  // (e.g. shared/org-0 products that arrive without a usable orgId).
  let qOrgId = qOrgIdRaw
  if (!qOrgId || Number(qOrgId) <= 0) qOrgId = organizationId.value?.id || organizationId.value
  if (!qOrgId) return
  const orgs = Array.isArray(organizations.value) ? organizations.value : []
  let matchedOrg = orgs.find(o => Number(o.id) === Number(qOrgId))
  // Org isn't in the cached mobile list but we have an id + name → build a minimal
  // org object so we can still auto-resolve its warehouse and jump to scan.
  if (!matchedOrg && qOrgName) {
    matchedOrg = { id: Number(qOrgId), name: qOrgName }
  }
  if (!matchedOrg) return
  try {
    selectedOrganization.value = matchedOrg
    warehouses.value = []
    selectedWarehouse.value = null
    isLoadingWarehouses.value = true
    const cId = clientId.value?.id || clientId.value
    const whRes = await $fetch(`/api/organizations/${matchedOrg.id}/warehouses`, {
      method: 'GET',
      headers: useRequestHeaders(['cookie']),
      params: { clientId: cId }
    })
    const whRecords = whRes?.records || whRes || []
    if (!Array.isArray(whRecords) || whRecords.length === 0 || !whRecords[0]?.id) return
    warehouses.value = whRecords.map(w => ({ ...w, name: w.Name || w.name || w.identifier || '' }))
    const targetWh = warehouses.value.find(w => Number(w.id) === Number(qWarehouseId)) || warehouses.value[0]
    selectedWarehouse.value = targetWh
  } catch (err) {
    console.error('Receive auto-start: warehouse load failed', err)
    return
  } finally {
    isLoadingWarehouses.value = false
  }
  currentStep.value = 'scan'
  receiptLines.value = []
  globalLocatorId.value = null
  globalLocatorCode.value = null
  loadLocators()
  // Add the EXACT clicked product to the fresh receipt (by id, not code search).
  const addId = pendingReceiveProductId.value
  const addVal = pendingReceiveProductValue.value
  pendingReceiveProductId.value = null
  pendingReceiveProductValue.value = null
  if (addId) {
    await scanProduct({ productId: addId, search: addVal })
  } else {
    searchQuery.value = addVal
    await scanProduct()
  }
}

// Guarded entry point for the product→receive hand-off. Called from both onMounted
// (fresh mount) and onActivated (kept-alive page re-shown by <NuxtPage keepalive>),
// because onMounted does NOT fire again when navigating back to a cached page — which
// is why arriving from /mobile/product used to fall back to the org picker. The flag
// prevents the onMounted+onActivated double-fire on the very first render.
let autoStartInFlight = false
const maybeAutoStartForProduct = () => {
  if (!(route.query.productValue || route.query.productId)) return
  if (autoStartInFlight) return
  autoStartInFlight = true
  Promise.resolve(autoStartForProduct()).finally(() => { autoStartInFlight = false })
}

// Keep-alive lifecycle: the page is cached by the root <NuxtPage :keepalive>,
// so onBeforeUnmount does NOT fire on navigation. The focus monitor + global
// keydown listener must be torn down in onDeactivated (else they keep running
// on other pages and swallow their scans) and re-armed in onActivated.
onActivated(() => {
  maybeAutoStartForProduct()
  if (isNativeApp) {
    startFocusMonitor()
    window.addEventListener('keydown', handleGlobalKeydown, true)
  }
})

onDeactivated(() => {
  if (hiddenScannerInput.value) hiddenScannerInput.value.blur()
  // Release the photo-capture camera if the user navigated away mid-capture
  if (stream.value) {
    stream.value.getTracks().forEach(t => t.stop())
    stream.value = null
    showCamera.value = false
  }
  if (isNativeApp) {
    stopFocusMonitor()
    window.removeEventListener('keydown', handleGlobalKeydown, true)
  }
  scanBuffer = ''
  if (scanTimeout) {
    clearTimeout(scanTimeout)
    scanTimeout = null
  }
})

onMounted(() => {
  ensureOrganizationsLoaded()
  fetchDocType()
  fetchDefaultPartnerLocation()
  maybeAutoStartForProduct()
  if (process.client) {
    const storedPrinter = localStorage.getItem('logship_receive_label_printer')
    if (storedPrinter && availablePrinters.includes(storedPrinter)) {
      selectedPrinter.value = storedPrinter
    }
    const storedFlag = localStorage.getItem('logship_receive_print_label')
    if (storedFlag !== null) printLabel.value = storedFlag === '1'
    const storedArticlePrinter = localStorage.getItem('logship_receive_article_label_printer')
    if (storedArticlePrinter && availablePrinters.includes(storedArticlePrinter)) {
      articleLabelPrinter.value = storedArticlePrinter
    }
  }
  if (isNativeApp) {
    startFocusMonitor()
    window.addEventListener('keydown', handleGlobalKeydown, true)
  }
})

onBeforeUnmount(() => {
  if (hiddenScannerInput.value) hiddenScannerInput.value.blur()
  if (stream.value) {
    stream.value.getTracks().forEach(t => t.stop())
    stream.value = null
  }
  if (isNativeApp) {
    stopFocusMonitor()
    window.removeEventListener('keydown', handleGlobalKeydown, true)
  }
  if (productSearchTimeout) clearTimeout(productSearchTimeout)
  if (scanTimeout) clearTimeout(scanTimeout)
})
</script>

<template>
  <div class="mobile-receive">
    <div class="mobile-header">
      <button class="back-button" @click="goBack">
        <i class="ti ti-arrow-left"></i>
      </button>
      <h1>Wareneingang</h1>
      <div class="header-right">
        <button v-if="receiptLines.length > 0" class="back-button" @click="clearAll" title="Zurücksetzen">
          <i class="ti ti-refresh"></i>
        </button>
        <button v-if="pageMode === 'create' && currentStep === 'scan'" class="change-org-btn" @click="changeOrg">
          <i class="ti ti-building"></i>
        </button>
        <div v-if="receiptLines.length === 0 && !(pageMode === 'create' && currentStep === 'scan')" class="spacer"></div>
      </div>
    </div>

    <!-- Page mode toggle -->
    <div v-if="pageMode === 'lookup' || currentStep === 'org'" class="mode-toggle">
      <button
        class="mode-toggle-btn"
        :class="{ active: pageMode === 'create' }"
        @click="setPageMode('create')"
      >
        <i class="ti ti-plus"></i>
        <span>Neu erstellen</span>
      </button>
      <button
        class="mode-toggle-btn"
        :class="{ active: pageMode === 'lookup' }"
        @click="setPageMode('lookup')"
      >
        <i class="ti ti-search"></i>
        <span>Suchen</span>
      </button>
    </div>

    <!-- Lookup mode: scan / search an existing receipt -->
    <div v-if="pageMode === 'lookup'" class="lookup-view">
      <div class="step-hint">
        <i class="ti ti-scan"></i>
        <span>Wareneingang scannen oder Nummer eingeben</span>
      </div>

      <div class="lookup-search-box">
        <input
          ref="lookupInputRef"
          v-model="lookupQuery"
          type="text"
          class="lookup-search-input"
          placeholder="DokumentNr. oder Tracking..."
          autocomplete="off"
          autocorrect="off"
          autocapitalize="off"
          spellcheck="false"
          @keyup.enter="searchReceipt"
        />
        <button
          class="lookup-search-go"
          @click="searchReceipt"
          :disabled="isLookupLoading || !lookupQuery"
        >
          <i v-if="isLookupLoading" class="ti ti-loader-2 spin"></i>
          <i v-else class="ti ti-arrow-right"></i>
        </button>
      </div>

      <div v-if="lookupError" class="error-message">
        <i class="ti ti-alert-circle"></i>
        <span>{{ lookupError }}</span>
      </div>

      <!-- Detail view -->
      <div v-if="lookupResult" class="lookup-detail">
        <div class="lookup-header-card">
          <div class="lookup-doc-row">
            <div class="lookup-doc-no">{{ lookupResult.DocumentNo }}</div>
            <span class="lookup-status-badge" :class="{ done: (lookupResult.DocStatus?.id || lookupResult.DocStatus) === 'CO' }">
              {{ lookupResult.DocStatus?.identifier || lookupResult.DocStatus?.id || lookupResult.DocStatus || '' }}
            </span>
          </div>
          <div class="lookup-info-grid">
            <div class="lookup-info-row">
              <span class="lookup-info-label">Erstellt</span>
              <span class="lookup-info-value">{{ formatGermanDateTime(lookupResult.Created) }}</span>
            </div>
            <div class="lookup-info-row">
              <span class="lookup-info-label">Organisation</span>
              <span class="lookup-info-value">{{ lookupResult.AD_Org_ID?.companyname || lookupResult.AD_Org_ID?.identifier || lookupResult.AD_Org_ID?.Name || '—' }}</span>
            </div>
            <div class="lookup-info-row">
              <span class="lookup-info-label">Lager</span>
              <span class="lookup-info-value">{{ lookupResult.M_Warehouse_ID?.identifier || lookupResult.M_Warehouse_ID?.Name || '—' }}</span>
            </div>
            <div class="lookup-info-row">
              <span class="lookup-info-label">Partner</span>
              <span class="lookup-info-value">{{ lookupResult.C_BPartner_ID?.identifier || lookupResult.C_BPartner_ID?.Name || '—' }}</span>
            </div>
            <div class="lookup-info-row">
              <span class="lookup-info-label">Dokumenttyp</span>
              <span class="lookup-info-value">{{ lookupResult.C_DocType_ID?.identifier || lookupResult.C_DocType_ID?.Name || '—' }}</span>
            </div>
            <div class="lookup-info-row" v-if="lookupResult.SalesRep_ID || lookupResult.AD_User_ID">
              <span class="lookup-info-label">Ersteller</span>
              <span class="lookup-info-value">{{ lookupResult.SalesRep_ID?.identifier || lookupResult.AD_User_ID?.identifier || '—' }}</span>
            </div>
            <div class="lookup-info-row" v-if="lookupResult.TrackingNo">
              <span class="lookup-info-label">Tracking</span>
              <span class="lookup-info-value">{{ lookupResult.TrackingNo }}</span>
            </div>
          </div>
          <div class="lookup-summary-row">
            <div class="lookup-summary-chip">
              <i class="ti ti-list"></i>
              <span>{{ lookupLines.length }} Position{{ lookupLines.length === 1 ? '' : 'en' }}</span>
            </div>
            <div class="lookup-summary-chip">
              <i class="ti ti-package"></i>
              <span>{{ lookupTotalQty }} Stk.</span>
            </div>
          </div>
        </div>

        <!-- Positions -->
        <div class="lookup-section">
          <div class="lookup-section-title">Positionen</div>
          <div v-if="lookupLines.length === 0" class="lookup-empty">Keine Positionen</div>
          <div v-else class="lookup-lines">
            <div v-for="l in lookupLines" :key="l.line" class="lookup-line">
              <div class="lookup-line-main">
                <div class="lookup-line-name">{{ l.productName }}</div>
                <div class="lookup-line-meta">
                  <span v-if="l.productValue">{{ l.productValue }}</span>
                  <span v-if="l.locator"> · <i class="ti ti-map-pin"></i> {{ l.locator }}</span>
                </div>
              </div>
              <div class="lookup-line-qty">
                <span class="lookup-line-qty-value">{{ l.qty }}</span>
                <span v-if="l.uom" class="lookup-line-qty-uom">{{ l.uom }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Attachments -->
        <div class="lookup-section">
          <div class="lookup-section-title">Anhänge ({{ lookupAttachments.length }})</div>
          <div v-if="lookupAttachments.length === 0" class="lookup-empty">Keine Anhänge</div>
          <div v-else class="lookup-attachments">
            <div
              v-for="att in lookupAttachments"
              :key="att.id"
              class="lookup-attachment"
            >
              <img
                v-if="att.isImage"
                :src="att.url"
                :alt="att.name"
                @click="openLookupImage(att.url)"
              />
              <a
                v-else
                :href="att.url"
                target="_blank"
                rel="noopener"
                class="lookup-attachment-file"
              >
                <i class="ti ti-file"></i>
                <span>{{ att.name }}</span>
              </a>
            </div>
          </div>
        </div>

        <!-- Actions for looked-up receipt -->
        <div class="actions">
          <button @click="reprintLookupLabels" class="action-button secondary">
            <i class="ti ti-printer"></i>
            <span>Etikett drucken ({{ labelCount }}x {{ selectedPrinter }})</span>
          </button>
          <button @click="clearLookup" class="action-button secondary">
            <i class="ti ti-x"></i>
            <span>Schließen</span>
          </button>
        </div>
      </div>
    </div>

    <!-- Step 1: Organization Selection -->
    <div v-if="pageMode === 'create' && currentStep === 'org'" class="org-step">
      <!-- Quick path: pick from all open POs; org + warehouse auto-set -->
      <button class="po-quick-btn" @click="openPOPicker">
        <i class="ti ti-file-invoice"></i>
        <div class="po-quick-text">
          <span class="po-quick-title">Offene Bestellung wählen</span>
          <span class="po-quick-sub">Organisation und Lager werden automatisch gesetzt</span>
        </div>
        <i class="ti ti-chevron-right"></i>
      </button>
      <div class="po-quick-divider"><span>oder</span></div>

      <div class="step-hint">
        <i class="ti ti-building"></i>
        <span>Organisation und Lager auswählen</span>
      </div>

      <div class="org-list">
        <button
          v-for="org in organizations"
          :key="org.id"
          class="org-option"
          :class="{ active: selectedOrganization?.id === org.id }"
          @click="selectOrganization(org)"
        >
          <span class="org-name">{{ org.name }}</span>
          <i v-if="selectedOrganization?.id === org.id" class="ti ti-check"></i>
        </button>
      </div>

      <!-- Warehouse selection -->
      <div v-if="selectedOrganization && warehouses.length > 0" class="warehouse-section">
        <div class="warehouse-hint">Lager auswählen:</div>
        <button
          v-for="wh in warehouses"
          :key="wh.id"
          class="warehouse-option"
          :class="{ active: selectedWarehouse?.id === wh.id }"
          @click="selectWarehouse(wh)"
        >
          <span class="warehouse-name">{{ wh.name }}</span>
          <i v-if="selectedWarehouse?.id === wh.id" class="ti ti-check"></i>
        </button>
      </div>

      <div v-if="isLoadingWarehouses" class="loading-indicator">
        <i class="ti ti-loader-2 spin"></i>
        <span>Lädt Lager...</span>
      </div>

      <button
        class="confirm-org-button"
        @click="confirmOrgSelection"
        :disabled="!selectedOrganization || !selectedWarehouse"
      >
        <i class="ti ti-check"></i>
        <span>Bestätigen</span>
      </button>
    </div>

    <!-- Step 2: Scan & Add Products -->
    <div v-if="pageMode === 'create' && currentStep === 'scan'">
      <!-- Org/Warehouse info bar -->
      <div class="context-bar">
        <span class="context-org">{{ selectedOrganization?.name }}</span>
        <span class="context-sep">/</span>
        <span class="context-wh">{{ selectedWarehouse?.name }}</span>
      </div>

      <!-- Barcode Scanner Component -->
      <BarcodeScanner
        :showScanner="showScanner"
        :scannerError="scannerError"
        :isProcessingScan="isProcessingScan"
        :loading="loading"
      />

      <!-- Hidden input for scanner capture -->
      <input
        ref="hiddenScannerInput"
        v-model="searchQuery"
        type="text"
        class="hidden-scanner-input"
        inputmode="none"
        :readonly="isNativeApp"
        autocomplete="off"
        autocorrect="off"
        autocapitalize="off"
        spellcheck="false"
        @keyup.enter="!isNativeApp && scanProduct()"
      />

      <!-- Scan prompt -->
      <div class="scan-prompt" @click="focusHiddenInput">
        <div class="scan-prompt-content">
          <i class="ti ti-scan"></i>
          <span class="scan-text">{{ loading ? 'Suche...' : (searchQuery ? searchQuery : 'ARTIKEL SCANNEN') }}</span>
        </div>
        <button v-if="searchQuery && !loading" class="scan-search-btn" @click.stop="scanProduct">
          <i class="ti ti-search"></i>
        </button>
      </div>

      <!-- Duplicate Products Warning (pick master, others get UPC suffixed) -->
      <div v-if="duplicates && duplicates.length > 1" class="duplicate-warning">
        <div class="duplicate-header">
          <i class="ti ti-alert-triangle"></i>
          <span>{{ duplicates.length }} Artikel für "{{ duplicateSearchTerm }}"</span>
        </div>
        <div class="duplicate-hint">Wähle den Artikel, der den eindeutigen Code behält. Die anderen werden als Duplikat markiert.</div>
        <div class="duplicate-list">
          <div
            v-for="dup in duplicates"
            :key="dup.id"
            class="duplicate-card"
            :class="{ disabled: duplicateResolving }"
            @click="!duplicateResolving && resolveDuplicate(dup)"
          >
            <div class="duplicate-name">{{ dup.Name || 'N/A' }}</div>
            <div class="duplicate-fields">
              <span v-if="dup.Value" class="dup-field">Value: {{ dup.Value }}</span>
              <span v-if="dup.SKU" class="dup-field">SKU: {{ dup.SKU }}</span>
              <span v-if="dup.UPC" class="dup-field">UPC: {{ dup.UPC }}</span>
              <span v-if="dup.MPN" class="dup-field">MPN: {{ dup.MPN }}</span>
            </div>
            <div class="duplicate-org" v-if="dup.AD_Org_ID">{{ dup.AD_Org_ID?.identifier || '' }}</div>
            <div class="duplicate-qty" :class="{ 'has-qty': dup.qtyonhand > 0 }">
              <i class="ti ti-package"></i>
              {{ dup.qtyonhand }}<span v-if="dup.returnQtyOnHand > 0" class="duplicate-return-qty"> · <i class="ti ti-arrow-back-up"></i>{{ dup.returnQtyOnHand }}</span>
            </div>
          </div>
        </div>
        <div v-if="duplicateResolving" class="duplicate-resolving">
          <i class="ti ti-loader-2 spin"></i> Duplikate werden aufgelöst...
        </div>
        <button class="action-button secondary" @click="duplicates = null" :disabled="duplicateResolving">
          <i class="ti ti-x"></i>
          <span>Abbrechen</span>
        </button>
      </div>

      <!-- Source PO loader -->
      <div class="po-source-section">
        <div v-if="sourcePO" class="po-chip">
          <i class="ti ti-file-invoice"></i>
          <div class="po-chip-text">
            <span class="po-chip-no">{{ sourcePO.documentNo }}</span>
            <span class="po-chip-partner">{{ sourcePO.partner?.name }}</span>
          </div>
          <button class="po-chip-clear" @click="clearSourcePO" title="Bestellung trennen">
            <i class="ti ti-x"></i>
          </button>
        </div>
        <button v-else class="po-load-btn" @click="openPOPicker">
          <i class="ti ti-file-invoice"></i>
          <span>Bestellung laden</span>
        </button>
      </div>

      <!-- Product text search -->
      <div class="product-search-section">
        <button class="product-search-toggle" @click="toggleProductSearch">
          <i class="ti ti-search"></i>
          <span>{{ showProductSearch ? 'Suche schliessen' : 'Artikel suchen' }}</span>
        </button>
        <div v-if="showProductSearch" class="product-search-container">
          <div class="product-search-box">
            <input
              v-model="productSearchTerm"
              type="text"
              placeholder="Name, Artikelnr., SKU, MPN oder UPC..."
              class="product-search-input"
              inputmode="text"
              autocomplete="off"
              autocorrect="off"
              autocapitalize="off"
              spellcheck="false"
              @input="searchProductByText"
              @keyup.enter="searchProductByText"
            />
            <i v-if="isSearchingProduct" class="ti ti-loader-2 spin product-search-loader"></i>
          </div>
          <div v-if="productSearchResults.length > 0" class="product-search-results">
            <div
              v-for="p in productSearchResults"
              :key="p.id"
              class="product-search-item"
              @click="selectProductFromSearch(p)"
            >
              <div class="product-search-item-name">{{ p.Name }}</div>
              <div class="product-search-item-meta">
                <span>{{ p.Value }}</span>
                <span v-if="p.SKU"> · {{ p.SKU }}</span>
                <span v-if="p.MPN"> · {{ p.MPN }}</span>
              </div>
            </div>
          </div>
          <div v-else-if="productSearchTerm.length >= 2 && !isSearchingProduct" class="product-search-empty">
            Keine Produkte gefunden
          </div>
        </div>
      </div>

      <!-- Error -->
      <div v-if="error" class="error-message">
        <i class="ti ti-alert-circle"></i>
        <span>{{ error }}</span>
      </div>

      <!-- Global locator -->
      <div class="global-locator-section">
        <div class="global-locator-header">
          <h3>Lagerplatz (alle)</h3>
        </div>
        <div v-if="globalLocatorCode" class="global-locator-selected" @click="openLocatorSelector('all')">
          <i class="ti ti-map-pin"></i>
          <span class="global-locator-code">{{ globalLocatorCode }}</span>
          <button @click.stop="globalLocatorId = null; globalLocatorCode = null" class="global-locator-clear">
            <i class="ti ti-x"></i>
          </button>
        </div>
        <button v-else class="set-locator-btn" @click="openLocatorSelector('all')">
          <i class="ti ti-map-pin"></i>
          <span>Lagerplatz setzen</span>
        </button>
      </div>

      <!-- Receipt lines -->
      <div v-if="receiptLines.length > 0" class="lines-section">
        <div class="lines-header">
          <h3>Positionen ({{ receiptLines.length }})</h3>
          <button @click="clearAll" class="clear-all-btn">
            <i class="ti ti-trash"></i>
            Alle löschen
          </button>
        </div>

        <div class="lines-list">
          <div v-for="(line, index) in receiptLines" :key="line.productId" class="line-item">
            <div class="line-info">
              <div class="line-name">{{ line.productName }}</div>
              <div class="line-meta">
                <span>{{ line.productValue }}</span>
                <span v-if="line.productSKU"> · {{ line.productSKU }}</span>
              </div>
              <button class="line-locator-btn" :class="{ 'has-locator': line.locatorCode }" @click="openLocatorSelector('single', index)">
                <i class="ti ti-map-pin"></i>
                <span v-if="line.locatorCode">{{ line.locatorCode }}</span>
                <span v-else>Lagerplatz</span>
              </button>
            </div>
            <div class="line-qty" @click="openNumberPad(index)">
              <span>{{ line.qtyEntered }}</span>
              <i class="ti ti-edit"></i>
            </div>
            <button @click="removeLine(index)" class="remove-line-btn">
              <i class="ti ti-trash"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- Image capture (Strapi attachments) -->
      <div v-if="receiptLines.length > 0" class="image-section">
        <div class="image-section-header">
          <h3>Bilder ({{ capturedImages.length }})</h3>
        </div>
        <button class="camera-button-capture" @click="startCamera">
          <i class="ti ti-camera"></i>
          <span>Bild aufnehmen</span>
        </button>
        <div v-if="capturedImages.length > 0" class="images-preview">
          <div
            v-for="image in capturedImages"
            :key="image.id"
            class="image-thumbnail"
          >
            <img :src="image.data" @click="openImageModal(image.data)" />
            <button class="remove-image" @click="removeImage(image.id)">
              <i class="ti ti-x"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- Label printing settings -->
      <div v-if="receiptLines.length > 0" class="label-section">
        <div class="checkbox-group">
          <div class="checkbox-label" @click="printLabel = !printLabel">
            <span class="checkbox-box" :class="{ checked: printLabel }">
              <i v-if="printLabel" class="ti ti-check"></i>
            </span>
            <span class="checkbox-text">Etikett drucken</span>
          </div>
        </div>

        <div v-if="printLabel" class="label-controls">
          <div class="label-control-row">
            <label class="label-control-label">Anzahl</label>
            <div class="qty-stepper">
              <button
                class="qty-stepper-btn"
                @click="labelCount = Math.max(1, labelCount - 1)"
                :disabled="labelCount <= 1"
              >
                <i class="ti ti-minus"></i>
              </button>
              <input
                v-model.number="labelCount"
                type="number"
                min="1"
                max="99"
                inputmode="numeric"
                class="qty-stepper-input"
              />
              <button
                class="qty-stepper-btn"
                @click="labelCount = Math.min(99, labelCount + 1)"
                :disabled="labelCount >= 99"
              >
                <i class="ti ti-plus"></i>
              </button>
            </div>
          </div>

          <div class="label-control-row">
            <label class="label-control-label">Drucker</label>
            <select
              v-model="selectedPrinter"
              class="printer-select"
              style="touch-action: manipulation;"
              @pointerdown="beginPrinterSelect"
              @touchstart="beginPrinterSelect"
              @change="endPrinterSelect"
              @blur="endPrinterSelect"
            >
              <option v-for="p in availablePrinters" :key="p" :value="p">{{ p }}</option>
            </select>
          </div>
        </div>
      </div>

      <!-- Article-label printing (one label per qty unit, mirrors desktop "Print Labels Server Only") -->
      <div v-if="receiptLines.length > 0" class="label-section article-label-section">
        <div class="article-label-header">
          <h3>Artikel-Etiketten</h3>
          <span class="article-label-counter" v-if="articleLabelTotalCount > 0">
            {{ articleLabelTotalCount }} Etikett(en)
          </span>
        </div>

        <!-- Master select-all/none -->
        <div
          class="checkbox-label master-select"
          @click="toggleAllArticleLines"
        >
          <span
            class="checkbox-box"
            :class="{
              checked: allArticleLinesSelected,
              indeterminate: !allArticleLinesSelected && someArticleLinesSelected
            }"
          >
            <i v-if="allArticleLinesSelected" class="ti ti-check"></i>
            <i v-else-if="someArticleLinesSelected" class="ti ti-minus"></i>
          </span>
          <span class="checkbox-text">
            {{ allArticleLinesSelected ? 'Keine auswählen' : 'Alle auswählen' }}
            <span class="muted">({{ selectedArticleLineIds.size }} / {{ receiptLines.length }})</span>
          </span>
        </div>

        <!-- Per-line selection -->
        <div class="article-label-lines">
          <div
            v-for="(line, alIdx) in receiptLines"
            :key="'al-' + line.productId + '-' + alIdx"
            class="article-label-line"
            :class="{ selected: isArticleLineSelected(line.productId) }"
            @click="toggleArticleLine(line.productId)"
          >
            <span
              class="checkbox-box"
              :class="{ checked: isArticleLineSelected(line.productId) }"
            >
              <i v-if="isArticleLineSelected(line.productId)" class="ti ti-check"></i>
            </span>
            <div class="article-label-line-info">
              <div class="article-label-line-name">{{ line.productName }}</div>
              <div class="article-label-line-meta">
                <span>{{ line.productValue }}</span>
                <span v-if="line.productSKU"> · {{ line.productSKU }}</span>
              </div>
            </div>
            <div class="article-label-line-qty">
              <i class="ti ti-tag"></i>
              {{ line.qtyEntered }}
            </div>
          </div>
        </div>

        <!-- Printer + print button -->
        <div class="label-control-row" style="margin-top: 6px;">
          <label class="label-control-label">Drucker</label>
          <select
            v-model="articleLabelPrinter"
            class="printer-select"
            style="touch-action: manipulation;"
            @pointerdown="beginPrinterSelect"
            @touchstart="beginPrinterSelect"
            @change="endPrinterSelect"
            @blur="endPrinterSelect"
          >
            <option v-for="p in availablePrinters" :key="'al-' + p" :value="p">{{ p }}</option>
          </select>
        </div>

        <button
          class="article-label-print-btn"
          :disabled="!someArticleLinesSelected || articleLabelPrinting"
          @click="printSelectedArticleLabels"
        >
          <i class="ti ti-printer"></i>
          <span>
            {{ articleLabelPrinting
              ? 'Drucke…'
              : `Artikel-Etiketten drucken${articleLabelTotalCount > 0 ? ' (' + articleLabelTotalCount + ')' : ''}`
            }}
          </span>
        </button>
      </div>

      <!-- Submit actions -->
      <div v-if="receiptLines.length > 0" class="actions">
        <button
          @click="submitReceipt"
          class="action-button primary"
          :disabled="submitting || !canSubmit"
        >
          <i class="ti ti-check"></i>
          <span>{{ submitting ? 'Wird erstellt...' : `Wareneingang (${receiptLines.length})` }}</span>
        </button>
      </div>
    </div>

    <!-- Camera Modal -->
    <div v-if="showCamera" class="receive-modal-overlay receive-camera-modal">
      <div class="receive-camera-content">
        <div class="receive-camera-header">
          <h3>Bild aufnehmen</h3>
          <div class="receive-camera-counter" v-if="capturedImages.length > 0">
            {{ capturedImages.length }}
          </div>
          <button class="receive-close-camera" @click="stopCamera">
            <i class="ti ti-x"></i>
          </button>
        </div>
        <video ref="videoRef" autoplay playsinline class="receive-camera-video"></video>
        <canvas ref="canvasRef" style="display: none;"></canvas>
        <div class="receive-camera-controls">
          <button class="receive-exit-camera-button" @click="stopCamera">
            <i class="ti ti-arrow-left"></i>
            <span>{{ capturedImages.length > 0 ? 'Fertig (' + capturedImages.length + ')' : 'Zurück' }}</span>
          </button>
          <button class="receive-capture-button" @click="captureImage">
            <i class="ti ti-camera"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- Image Enlarge Modal -->
    <div v-if="showImageModal" class="receive-modal-overlay receive-image-modal" @click="closeImageModal">
      <div class="receive-image-modal-content" @click.stop>
        <button class="receive-close-image-modal" @click="closeImageModal">
          <i class="ti ti-x"></i>
        </button>
        <img :src="selectedImage" alt="Aufnahme" />
      </div>
    </div>

    <!-- Lookup Image Enlarge Modal -->
    <div v-if="showLookupImageModal" class="receive-modal-overlay receive-image-modal" @click="closeLookupImage">
      <div class="receive-image-modal-content" @click.stop>
        <button class="receive-close-image-modal" @click="closeLookupImage">
          <i class="ti ti-x"></i>
        </button>
        <img :src="lookupSelectedImage" alt="Anhang" />
      </div>
    </div>

    <!-- Open PO Picker Overlay -->
    <div v-if="showPOPicker" class="number-pad-overlay" @click="closePOPicker">
      <div class="po-picker" @click.stop>
        <div class="po-picker-header">
          <span>Offene Bestellungen</span>
          <button @click="closePOPicker" class="close-btn"><i class="ti ti-x"></i></button>
        </div>
        <div class="po-picker-search">
          <i class="ti ti-search"></i>
          <input
            v-model="poFilter"
            type="text"
            placeholder="Nach Belegnr., Lieferant, Referenz..."
            autocomplete="off"
            autocorrect="off"
            autocapitalize="off"
            spellcheck="false"
          />
          <button v-if="!isLoadingPOs" class="po-picker-refresh" @click="loadOpenPOs" title="Aktualisieren">
            <i class="ti ti-refresh"></i>
          </button>
        </div>
        <div v-if="isLoadingPOs" class="po-picker-loading">
          <i class="ti ti-loader-2 spin"></i>
          <span>Lade Bestellungen...</span>
        </div>
        <div v-else-if="filteredPOs.length === 0" class="po-picker-empty">
          <i class="ti ti-file-off"></i>
          <span>{{ openPOs.length === 0 ? 'Keine offenen Bestellungen' : 'Keine Treffer' }}</span>
        </div>
        <div v-else class="po-picker-list">
          <div
            v-for="po in filteredPOs"
            :key="po.id"
            class="po-picker-item"
            :class="{ expanded: expandedPoId === po.id }"
          >
            <!-- Tap the card to load the PO into the receipt (unchanged) -->
            <button class="po-picker-item-tap" @click="selectPO(po)">
              <div class="po-picker-item-main">
                <span class="po-picker-doc">{{ po.documentNo }}</span>
                <span v-if="po.org?.name" class="po-picker-org">
                  <i class="ti ti-building"></i> {{ po.org.name }}
                </span>
                <span v-if="po.poReference" class="po-picker-ref">{{ po.poReference }}</span>
              </div>
              <div class="po-picker-item-meta">
                <span class="po-picker-partner">{{ po.partner?.name || '—' }}</span>
                <span v-if="po.datePromised" class="po-picker-date">
                  <i class="ti ti-calendar"></i> {{ formatGermanDateTime(po.datePromised)?.split(',')?.[0] || po.datePromised }}
                </span>
              </div>
            </button>

            <!-- Expand/collapse to preview the articles inside (without selecting) -->
            <button
              class="po-picker-expand"
              :class="{ open: expandedPoId === po.id }"
              :aria-expanded="expandedPoId === po.id"
              @click.stop="togglePoDetails(po)"
            >
              <i :class="expandedPoId === po.id ? 'ti ti-chevron-up' : 'ti ti-chevron-down'"></i>
              <span>{{ expandedPoId === po.id ? 'Artikel ausblenden' : 'Artikel anzeigen' }}</span>
              <span v-if="Array.isArray(poOrderLines[po.id])" class="po-picker-expand-count">
                {{ poOrderLines[po.id].length }}
              </span>
            </button>

            <!-- Collapsible article list -->
            <div v-if="expandedPoId === po.id" class="po-picker-products">
              <div v-if="loadingPoLines[po.id]" class="po-picker-products-state">
                <i class="ti ti-loader-2 spin"></i><span>Lade Artikel...</span>
              </div>
              <div v-else-if="(poOrderLines[po.id] || []).length === 0" class="po-picker-products-state">
                <i class="ti ti-package-off"></i><span>Keine Artikel</span>
              </div>
              <template v-else>
                <div
                  v-for="line in poOrderLines[po.id]"
                  :key="line.id"
                  class="po-picker-product-line"
                >
                  <div class="po-picker-product-name">{{ line.name }}</div>
                  <div class="po-picker-product-meta">
                    <span v-if="line.value" class="po-picker-product-code">{{ line.value }}</span>
                    <span class="po-picker-product-qty">{{ line.qtyOrdered }} {{ line.uom }}</span>
                    <span
                      v-if="line.qtyRemaining !== line.qtyOrdered"
                      class="po-picker-product-open"
                    >offen: {{ line.qtyRemaining }}</span>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Number Pad Overlay -->
    <div v-if="showNumberPad" class="number-pad-overlay" @click="closeNumberPad">
      <div class="number-pad" @click.stop>
        <div class="number-pad-header">
          <span>Menge eingeben</span>
          <button @click="closeNumberPad" class="close-btn"><i class="ti ti-x"></i></button>
        </div>
        <div class="number-display">{{ numberInput || '0' }}</div>
        <div class="number-grid">
          <button @click="appendNumber(1)" class="num-btn">1</button>
          <button @click="appendNumber(2)" class="num-btn">2</button>
          <button @click="appendNumber(3)" class="num-btn">3</button>
          <button @click="appendNumber(4)" class="num-btn">4</button>
          <button @click="appendNumber(5)" class="num-btn">5</button>
          <button @click="appendNumber(6)" class="num-btn">6</button>
          <button @click="appendNumber(7)" class="num-btn">7</button>
          <button @click="appendNumber(8)" class="num-btn">8</button>
          <button @click="appendNumber(9)" class="num-btn">9</button>
          <button @click="clearNumber" class="num-btn clear">C</button>
          <button @click="appendNumber(0)" class="num-btn">0</button>
          <button @click="backspaceNumber" class="num-btn backspace"><i class="ti ti-backspace"></i></button>
        </div>
        <button @click="confirmNumber" class="confirm-btn">
          <i class="ti ti-check"></i> Bestätigen
        </button>
      </div>
    </div>

    <!-- Receipt completed — final page: success + optional task with manual time -->
    <div v-if="completedReceipt" class="number-pad-overlay">
      <div class="receipt-done-card" @click.stop>
        <div class="receipt-done-head">
          <i class="ti ti-circle-check"></i>
          <div class="receipt-done-title">Wareneingang erstellt</div>
          <div class="receipt-done-doc">{{ completedReceipt.documentNo }} · {{ completedReceipt.lineCount }} Positionen</div>
        </div>

        <template v-if="!taskCreatedDocNo">
          <div class="receipt-task-hint">
            Optional: Aufgabe mit Zeitaufwand zu diesem Wareneingang erfassen
          </div>
          <div class="receipt-task-time">
            <div class="rt-field">
              <label>Stunden</label>
              <input
                v-model.number="taskHours"
                type="number"
                inputmode="numeric"
                min="0"
                step="1"
                placeholder="0"
              />
            </div>
            <div class="rt-sep">:</div>
            <div class="rt-field">
              <label>Minuten</label>
              <input
                v-model.number="taskMinutes"
                type="number"
                inputmode="numeric"
                min="0"
                max="59"
                step="1"
                placeholder="0"
              />
            </div>
          </div>
          <button
            class="receipt-task-btn"
            :disabled="creatingTask || taskTotalMinutes <= 0"
            @click="createReceiptTask"
          >
            <i class="ti" :class="creatingTask ? 'ti-loader spin' : 'ti-clipboard-plus'"></i>
            <span>{{ creatingTask ? 'Aufgabe wird erstellt…' : 'Aufgabe erstellen' }}</span>
          </button>
        </template>

        <div v-else class="receipt-task-created">
          <i class="ti ti-checklist"></i>
          <span>Aufgabe {{ taskCreatedDocNo }} erstellt</span>
        </div>

        <button class="receipt-done-btn" @click="closeCompletedOverlay">
          <i class="ti ti-check"></i> Fertig
        </button>
      </div>
    </div>

    <!-- Locator Selector Overlay -->
    <div v-if="showLocatorSelector" class="number-pad-overlay" @click="closeLocatorSelector">
      <div class="locator-selector" @click.stop>
        <div class="number-pad-header">
          <button
            v-if="showLocatorBrowser"
            @click="selectedLocatorGroup ? backToLocatorGroups() : (showLocatorBrowser = false)"
            class="close-btn"
            aria-label="Zurück"
          >
            <i class="ti ti-arrow-left"></i>
          </button>
          <span>
            <template v-if="showLocatorBrowser && selectedLocatorGroup">Gruppe {{ selectedLocatorGroup }}</template>
            <template v-else-if="showLocatorBrowser">Gruppen</template>
            <template v-else>{{ locatorMode === 'all' ? 'Lagerplatz für alle' : 'Lagerplatz wählen' }}</template>
          </span>
          <button @click="closeLocatorSelector" class="close-btn"><i class="ti ti-x"></i></button>
        </div>
        <div class="locator-scan-row">
          <div class="locator-scan-icon" @click="locatorScanInputRef?.focus()">
            <i class="ti ti-scan"></i>
          </div>
          <input
            ref="locatorScanInputRef"
            v-model="locatorScanQuery"
            type="text"
            class="locator-scan-input"
            placeholder="Scannen oder eingeben..."
            autocomplete="off"
            autocorrect="off"
            autocapitalize="off"
            spellcheck="false"
            @keyup.enter="handleLocatorScan"
          />
          <button v-if="locatorScanQuery" class="locator-scan-go" @click="handleLocatorScan">
            <i class="ti ti-arrow-right"></i>
          </button>
        </div>
        <!-- "Select locator" trigger — revealed only before the browser opens -->
        <button
          v-if="!showLocatorBrowser"
          class="select-locator-btn"
          @click="openLocatorBrowser"
        >
          <i class="ti ti-list-search"></i> Lagerplatz auswählen
        </button>

        <div v-if="showLocatorBrowser" class="locator-list">
          <div v-if="isLoadingLocators" class="no-locators-in-selector">
            <i class="ti ti-loader spin"></i>
            <p>Lagerplätze werden geladen…</p>
          </div>
          <div v-else-if="availableLocators.length === 0" class="no-locators-in-selector">
            <i class="ti ti-alert-circle"></i>
            <p>Keine Lagerplätze gefunden.</p>
          </div>

          <!-- Group view -->
          <template v-else-if="!selectedLocatorGroup">
            <div
              v-for="g in locatorGroups"
              :key="g.group"
              class="locator-option group-option"
              @click="openLocatorGroup(g.group)"
            >
              <div class="locator-option-info">
                <div class="locator-option-code">{{ g.group }}</div>
                <div class="locator-badge">{{ g.count }}</div>
              </div>
              <i class="ti ti-chevron-right"></i>
            </div>
          </template>

          <!-- Locator list within a group -->
          <template v-else>
            <div
              v-for="locator in locatorsInGroup"
              :key="locator.id"
              class="locator-option"
              :class="{ selected: selectedLocatorId === locator.id, default: locator.isDefault }"
              @click="selectedLocatorId = locator.id"
            >
              <div class="locator-option-info">
                <div class="locator-option-code">{{ locator.code }}</div>
                <div v-if="locator.isDefault" class="locator-badge">Default</div>
              </div>
              <i v-if="selectedLocatorId === locator.id" class="ti ti-check"></i>
            </div>
          </template>
        </div>
        <button
          v-if="showLocatorBrowser && selectedLocatorGroup"
          @click="confirmLocatorSelection"
          class="confirm-btn"
          :disabled="!selectedLocatorId"
        >
          <i class="ti ti-check"></i> Auswählen
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.mobile-receive {
  min-height: 100vh;
  padding: 12px;
  background: var(--mob-bg);
}

.mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 14px 0;
}

.mobile-header h1 {
  font-size: 22px;
  font-weight: 600;
  color: var(--mob-text);
  margin: 0;
}

.back-button, .change-org-btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mob-surface);
  border: 1px solid var(--mob-border);
  border-radius: 8px;
  color: var(--mob-text);
  font-size: 24px;
  cursor: pointer;
}

.back-button:active, .change-org-btn:active { background: var(--mob-hover); }
.spacer { width: 48px; }

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Context bar */
.context-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--mob-blue-bg);
  border: 1px solid var(--mob-blue-border);
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--mob-blue-soft);
}

.context-org { font-weight: 700; }
.context-sep { opacity: 0.5; }
.context-wh { opacity: 0.8; }

/* Hidden scanner input */
.hidden-scanner-input {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  opacity: 0;
  z-index: -1;
  border: none;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: transparent;
}

/* Scan prompt */
.scan-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  background: linear-gradient(135deg, var(--mob-blue-bg) 0%, var(--mob-blue-bg) 100%);
  border: 2px dashed var(--mob-blue);
  border-radius: 12px;
  margin-bottom: 16px;
  cursor: pointer;
  animation: pulse-border 2s ease-in-out infinite;
}

.scan-prompt:active {
  transform: scale(0.98);
  background: linear-gradient(135deg, var(--mob-blue-bg) 0%, var(--mob-blue-bg) 100%);
}

@keyframes pulse-border {
  0%, 100% { border-color: var(--mob-blue); box-shadow: 0 0 20px rgba(74, 144, 226, 0.2); }
  50% { border-color: var(--mob-blue-soft); box-shadow: 0 0 30px rgba(74, 144, 226, 0.4); }
}

.scan-prompt-content {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.scan-prompt-content i {
  font-size: 32px;
  color: var(--mob-blue-soft);
  animation: scan-icon-pulse 1.5s ease-in-out infinite;
}

@keyframes scan-icon-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

.scan-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--mob-blue-soft);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.scan-search-btn {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mob-blue);
  border: none;
  border-radius: 12px;
  color: var(--mob-on-blue);
  font-size: 24px;
  cursor: pointer;
  flex-shrink: 0;
}

.scan-search-btn:active { background: var(--mob-blue-hover); }

/* Product search */
.product-search-section { margin-bottom: 16px; }

.po-quick-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--mob-amber);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.08));
  color: var(--mob-text);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
  text-align: left;
}
.po-quick-btn:active { background: rgba(245, 158, 11, 0.28); }
.po-quick-btn > i:first-child { font-size: 26px; color: var(--mob-amber); flex-shrink: 0; }
.po-quick-btn > i:last-child { font-size: 20px; color: var(--mob-amber); flex-shrink: 0; margin-left: auto; }
.po-quick-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.po-quick-title { color: var(--mob-text); font-weight: 700; }
.po-quick-sub { color: var(--mob-text-secondary); font-size: 12px; font-weight: 500; }
.po-quick-divider {
  display: flex; align-items: center; justify-content: center;
  margin: 14px 0;
  color: var(--mob-text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
}
.po-quick-divider::before, .po-quick-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--mob-hover);
}
.po-quick-divider span { padding: 0 10px; }

.po-source-section { margin-bottom: 14px; }
.po-load-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 1.5px dashed var(--mob-amber);
  background: rgba(245, 158, 11, 0.08);
  color: var(--mob-amber);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.po-load-btn:active { background: rgba(245, 158, 11, 0.16); }
.po-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(245, 158, 11, 0.14);
  border: 1.5px solid var(--mob-amber);
  border-radius: 10px;
}
.po-chip > i { font-size: 20px; color: var(--mob-amber); flex-shrink: 0; }
.po-chip-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.po-chip-no { color: var(--mob-text); font-weight: 700; font-size: 15px; }
.po-chip-partner { color: var(--mob-text-secondary); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-chip-clear {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--mob-border);
  background: transparent; color: var(--mob-red-fg); cursor: pointer;
}
.po-chip-clear:active { background: var(--mob-red-bg); }

.po-picker {
  background: var(--mob-surface);
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow: hidden;
}
.po-picker-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; color: var(--mob-text); font-size: 17px; font-weight: 600;
}
.po-picker-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--mob-surface); border-radius: 8px;
  border: 1px solid var(--mob-hover); margin-bottom: 12px;
}
.po-picker-search > i { color: var(--mob-text-muted); }
.po-picker-search input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--mob-text); font-size: 14px;
}
.po-picker-refresh {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; border: 1px solid var(--mob-border);
  background: transparent; color: var(--mob-text-muted); cursor: pointer;
}
.po-picker-loading, .po-picker-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 24px; color: var(--mob-text-muted);
}
.po-picker-loading .ti, .po-picker-empty .ti { font-size: 28px; }
.po-picker-list {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  -webkit-overflow-scrolling: touch;
}
.po-picker-item {
  background: var(--mob-surface);
  border: 1px solid var(--mob-hover);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.po-picker-item.expanded { border-color: var(--mob-blue); }
/* Tappable header that loads the PO into the receipt */
.po-picker-item-tap {
  text-align: left;
  background: transparent;
  border: none;
  width: 100%;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  color: inherit;
}
.po-picker-item-tap:active { background: var(--mob-hover); }
.po-picker-item-main {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.po-picker-doc { color: var(--mob-text); font-weight: 700; font-size: 15px; }
.po-picker-org { display: inline-flex; align-items: center; gap: 3px; color: var(--mob-green-fg); font-size: 11px; font-weight: 600; }
.po-picker-ref { color: var(--mob-amber); font-size: 12px; }
.po-picker-item-meta {
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  color: var(--mob-text-secondary); font-size: 12px;
}
.po-picker-partner { overflow: hidden; text-overflow: ellipsis; }
.po-picker-date { display: inline-flex; align-items: center; gap: 4px; color: var(--mob-text-muted); }

/* Expand/collapse control + inline article preview */
.po-picker-expand {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--mob-hover);
  color: var(--mob-text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.po-picker-expand:active { background: var(--mob-hover); }
.po-picker-expand.open { color: var(--mob-blue); }
.po-picker-expand-count {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--mob-hover);
  color: var(--mob-text-secondary);
  font-size: 11px;
  text-align: center;
}
.po-picker-products {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px 10px 12px;
  border-top: 1px solid var(--mob-hover);
  background: var(--mob-bg);
  /* bound the expanded line list and let it scroll on its own so long POs aren't cut off */
  max-height: 50vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.po-picker-products-state {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px; color: var(--mob-text-muted); font-size: 13px;
}
.po-picker-product-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  background: var(--mob-surface);
  border-radius: 6px;
}
.po-picker-product-name { color: var(--mob-text); font-size: 13px; font-weight: 600; }
.po-picker-product-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11px;
}
.po-picker-product-code { color: var(--mob-amber); }
.po-picker-product-qty { color: var(--mob-text-secondary); font-weight: 600; margin-left: auto; }
.po-picker-product-open { color: var(--mob-green-fg); }

.product-search-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--mob-surface);
  border: 1px solid var(--mob-border);
  border-radius: 8px;
  color: var(--mob-text-secondary);
  font-size: 14px;
  cursor: pointer;
  width: 100%;
}

.product-search-toggle:active { background: var(--mob-hover); }

.product-search-container { margin-top: 8px; }

.product-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.product-search-input {
  width: 100%;
  height: 48px;
  padding: 0 40px 0 16px;
  background: var(--mob-surface);
  border: 2px solid var(--mob-border);
  border-radius: 8px;
  color: var(--mob-text);
  font-size: 16px;
}

.product-search-input:focus { outline: none; border-color: var(--mob-blue); }
.product-search-input::placeholder { color: var(--mob-text-muted); }

.product-search-loader {
  position: absolute;
  right: 12px;
  color: var(--mob-blue);
  font-size: 20px;
}

.product-search-results {
  margin-top: 4px;
  background: var(--mob-surface);
  border: 1px solid var(--mob-border);
  border-radius: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.product-search-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--mob-hover);
  cursor: pointer;
}

.product-search-item:last-child { border-bottom: none; }
.product-search-item:active { background: var(--mob-hover); }

.product-search-item-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--mob-text-secondary);
}

.product-search-item-meta {
  font-size: 13px;
  color: var(--mob-text-muted);
  margin-top: 2px;
}

.product-search-empty {
  padding: 16px;
  text-align: center;
  color: var(--mob-text-muted);
  font-size: 14px;
}

/* Error */
.error-message {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--mob-red-bg);
  border: 2px solid var(--mob-red-border);
  border-radius: 8px;
  color: var(--mob-red-fg);
  font-size: 16px;
  margin-bottom: 16px;
}

.error-message i { font-size: 22px; }

/* Global locator */
.global-locator-section { margin-bottom: 16px; }

.global-locator-header {
  margin-bottom: 8px;
}

.global-locator-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--mob-text-secondary);
  margin: 0;
}

.global-locator-selected {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--mob-green-bg);
  border: 2px solid var(--mob-green-border);
  border-radius: 8px;
  cursor: pointer;
}

.global-locator-selected i:first-child {
  font-size: 20px;
  color: var(--mob-green-fg);
}

.global-locator-code {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  color: var(--mob-green-fg);
}

.global-locator-clear {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--mob-green-border);
  border-radius: 6px;
  color: var(--mob-green-fg);
  font-size: 16px;
  cursor: pointer;
}

.global-locator-clear:active { background: var(--mob-green-border); }

.set-locator-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--mob-surface);
  border: 2px dashed var(--mob-text-muted);
  border-radius: 8px;
  color: var(--mob-text-secondary);
  font-size: 15px;
  cursor: pointer;
  width: 100%;
}

.set-locator-btn i { font-size: 20px; color: var(--mob-blue); }
.set-locator-btn:active { background: var(--mob-hover); }

/* Lines */
.lines-section { margin-bottom: 16px; }

.lines-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.lines-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--mob-text-secondary);
  margin: 0;
}

.clear-all-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--mob-red-bg);
  border: 1px solid var(--mob-red-border);
  border-radius: 6px;
  color: var(--mob-red-fg);
  font-size: 13px;
  cursor: pointer;
}

.clear-all-btn:active { background: var(--mob-red-border); }

.lines-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.line-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--mob-surface);
  border: 1px solid var(--mob-border);
  border-radius: 8px;
}

.line-info {
  flex: 1;
  min-width: 0;
}

.line-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--mob-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-item .line-info .line-meta,
.line-item .line-info .line-meta span {
  font-size: 13px;
  color: var(--mob-text) !important;
  margin-top: 2px;
}

.line-item .line-info button.line-locator-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--mob-red-border) !important;
  border: 1px solid var(--mob-red-border) !important;
  border-radius: 6px;
  color: var(--mob-text) !important;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.line-item .line-info button.line-locator-btn i { font-size: 14px; color: var(--mob-text) !important; }
.line-item .line-info button.line-locator-btn:active { background: var(--mob-red-border) !important; }

.line-item .line-info button.line-locator-btn.has-locator {
  background: var(--mob-green-border) !important;
  border-color: var(--mob-green) !important;
  color: var(--mob-text) !important;
}

.line-item .line-info button.line-locator-btn.has-locator i { color: var(--mob-text) !important; }

.line-qty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--mob-bg);
  border: 2px solid var(--mob-border);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.line-qty span {
  font-size: 22px;
  font-weight: 700;
  color: var(--mob-blue);
}

.line-qty i { font-size: 16px; color: var(--mob-text-muted); }
.line-qty:active { border-color: var(--mob-blue); }

.remove-line-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mob-red-bg);
  border: 1px solid var(--mob-red-border);
  border-radius: 8px;
  color: var(--mob-red-fg);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

.remove-line-btn:active { background: var(--mob-red-border); }

/* Actions */
.actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  padding-bottom: 24px;
}

.action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  border: none;
}

.action-button.primary {
  background: var(--mob-green);
  color: var(--mob-on-green);
}

.action-button.primary:active:not(:disabled) { background: var(--mob-green);
  color: var(--mob-on-green);
}
.action-button.primary:disabled { opacity: 0.5; cursor: not-allowed; }

.action-button.secondary {
  background: var(--mob-hover);
  border: 1px solid var(--mob-text-muted);
  color: var(--mob-text);
}

.action-button.secondary:active { background: var(--mob-border); }

/* Org step */
.org-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--mob-blue-bg);
  border: 1px solid var(--mob-blue-border);
  border-radius: 10px;
  color: var(--mob-blue-soft);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.step-hint i { font-size: 24px; }

.org-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.org-option {
  width: 100%;
  padding: 16px;
  background: var(--mob-surface);
  border: 2px solid var(--mob-border);
  border-radius: 8px;
  color: var(--mob-text) !important;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.org-option:active { background: var(--mob-hover); }

.org-option.active {
  border-color: var(--mob-blue);
  background: rgba(74, 144, 226, 0.1);
}

.org-name { color: var(--mob-text) !important; }

.warehouse-section {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--mob-border);
}

.warehouse-hint {
  color: var(--mob-text-muted);
  font-size: 14px;
  margin-bottom: 12px;
}

.warehouse-option {
  width: 100%;
  padding: 14px;
  background: var(--mob-surface);
  border: 2px solid var(--mob-border);
  border-radius: 8px;
  color: var(--mob-text) !important;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.warehouse-option:active { background: var(--mob-hover); }

.warehouse-option.active {
  border-color: var(--mob-green);
  background: rgba(34, 197, 94, 0.1);
}

.warehouse-name { color: var(--mob-text) !important; }

.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  color: var(--mob-text-muted);
  font-size: 14px;
}

.confirm-org-button {
  width: 100%;
  padding: 16px;
  background: var(--mob-blue);
  border: none;
  border-radius: 8px;
  color: var(--mob-on-blue) !important;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.confirm-org-button:active:not(:disabled) { background: var(--mob-blue-hover); }
.confirm-org-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Number pad overlay */
.number-pad-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.number-pad {
  background: var(--mob-surface);
  border-radius: 16px;
  width: 100%;
  max-width: 360px;
  padding: 20px;
}

.number-pad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  color: var(--mob-text);
  font-size: 18px;
  font-weight: 600;
}

.close-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--mob-border);
  border-radius: 8px;
  color: var(--mob-text);
  font-size: 20px;
  cursor: pointer;
}

.close-btn:active { background: var(--mob-hover); }

.number-display {
  text-align: center;
  font-size: 48px;
  font-weight: 700;
  color: var(--mob-blue);
  padding: 16px;
  background: var(--mob-bg);
  border: 2px solid var(--mob-border);
  border-radius: 10px;
  margin-bottom: 16px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.number-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.num-btn {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mob-hover);
  border: 1px solid var(--mob-border);
  border-radius: 10px;
  color: var(--mob-text);
  font-size: 26px;
  font-weight: 600;
  cursor: pointer;
}

.num-btn:active { background: var(--mob-border); }
.num-btn.clear { background: var(--mob-red-border); color: var(--mob-red-fg); }
.num-btn.clear:active { background: var(--mob-red-border); }
.num-btn.backspace { background: var(--mob-hover); }

.confirm-btn {
  width: 100%;
  padding: 18px;
  background: var(--mob-green);
  border: none;
  border-radius: 10px;
  color: var(--mob-on-green);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.confirm-btn:active:not(:disabled) { background: var(--mob-green);
  color: var(--mob-on-green);
}

/* Receipt-completed overlay (final page with optional task) */
.receipt-done-card {
  background: var(--mob-surface);
  border-radius: 16px;
  width: 100%;
  max-width: 380px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.receipt-done-head {
  text-align: center;
  color: var(--mob-text);
}

.receipt-done-head > i {
  font-size: 52px;
  color: var(--mob-green);
}

.receipt-done-title {
  font-size: 20px;
  font-weight: 700;
  margin-top: 4px;
}

.receipt-done-doc {
  font-size: 14px;
  color: var(--mob-text-secondary);
  margin-top: 4px;
}

.receipt-task-hint {
  font-size: 14px;
  color: var(--mob-text-secondary);
  text-align: center;
}

.receipt-task-time {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
}

.rt-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 110px;
}

.rt-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--mob-text-muted);
  text-align: center;
}

.rt-field input {
  width: 100%;
  padding: 14px 8px;
  background: var(--mob-bg);
  border: 2px solid var(--mob-border);
  border-radius: 10px;
  color: var(--mob-text);
  font-size: 28px;
  font-weight: 700;
  text-align: center;
}

.rt-field input:focus {
  outline: none;
  border-color: var(--mob-blue);
}

.rt-sep {
  font-size: 28px;
  font-weight: 700;
  color: var(--mob-text-muted);
  padding-bottom: 14px;
}

/* Primary action of the overlay — creating the task must read as "confirm",
   so it carries the big green styling (the plain close button is secondary). */
.receipt-task-btn {
  width: 100%;
  padding: 18px;
  background: var(--mob-green);
  border: none;
  border-radius: 10px;
  color: var(--mob-on-green);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.receipt-task-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.receipt-task-created {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: var(--mob-green-bg);
  border: 1px solid var(--mob-green-border);
  border-radius: 10px;
  color: var(--mob-green-fg);
  font-size: 15px;
  font-weight: 600;
}

.receipt-done-btn {
  width: 100%;
  padding: 14px;
  background: var(--mob-bg);
  border: 2px solid var(--mob-border);
  border-radius: 10px;
  color: var(--mob-text-secondary);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.confirm-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Locator selector */
.locator-selector {
  background: var(--mob-surface);
  border-radius: 16px;
  width: 100%;
  max-width: 400px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.locator-selector .number-pad-header {
  padding: 16px 20px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--mob-border);
}

.locator-scan-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--mob-hover);
}

.locator-scan-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mob-bg);
  border: 1px solid var(--mob-border);
  border-radius: 8px;
  color: var(--mob-blue);
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
}

.locator-scan-input {
  flex: 1;
  height: 40px;
  background: var(--mob-bg);
  border: 1px solid var(--mob-border);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--mob-text);
  font-size: 16px;
}

.locator-scan-input:focus { outline: none; border-color: var(--mob-blue); }
.locator-scan-input::placeholder { color: var(--mob-text-muted); }

.locator-scan-go {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mob-blue);
  border: none;
  border-radius: 8px;
  color: var(--mob-on-blue);
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
}

.locator-scan-go:active { background: var(--mob-blue-hover); }

.locator-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
  max-height: 50vh;
}

.no-locators-in-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--mob-text-muted);
  text-align: center;
}

.no-locators-in-selector i { font-size: 32px; }

.locator-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  margin-bottom: 6px;
  background: var(--mob-bg);
  border: 2px solid var(--mob-hover);
  border-radius: 8px;
  cursor: pointer;
  color: var(--mob-text-secondary);
}

.locator-option:active { background: var(--mob-surface); }

.locator-option.selected {
  border-color: var(--mob-blue);
  background: rgba(74, 144, 226, 0.1);
}

.locator-option.default { border-color: var(--mob-border); }

.locator-option.group-option .locator-option-code {
  font-size: 18px;
  letter-spacing: 1px;
}

.select-locator-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 16px 16px;
  padding: 14px;
  background: var(--mob-surface);
  color: var(--mob-text-secondary);
  border: 1px dashed var(--mob-blue);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.select-locator-btn:active { background: var(--mob-hover); }
.select-locator-btn i { color: var(--mob-blue); font-size: 18px; }

.locator-option-info { display: flex; align-items: center; gap: 10px; }

.locator-option-code {
  font-size: 16px;
  font-weight: 600;
  color: var(--mob-text-secondary);
}

.locator-badge {
  padding: 2px 8px;
  background: var(--mob-hover);
  border-radius: 4px;
  font-size: 11px;
  color: var(--mob-text-secondary);
}

.locator-option i { color: var(--mob-blue); font-size: 20px; }

.locator-selector .confirm-btn {
  margin: 12px 16px 16px;
  width: auto;
}

/* Spin animation */
.spin { animation: spin 1s linear infinite; }

/* Duplicate resolution (cloned from /mobile/product) */
.duplicate-warning { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.duplicate-header {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  background: var(--mob-amber-bg); border: 2px solid var(--mob-amber);
  border-radius: 8px; color: var(--mob-amber-fg); font-size: 16px; font-weight: 700;
}
.duplicate-header i { font-size: 24px; flex-shrink: 0; }
.duplicate-hint { color: var(--mob-text-muted); font-size: 13px; padding: 0 4px; }
.duplicate-list { display: flex; flex-direction: column; gap: 8px; }
.duplicate-card {
  background: var(--mob-surface); border: 2px solid var(--mob-border);
  border-radius: 10px; padding: 14px; cursor: pointer;
  transition: all 0.2s ease; position: relative;
}
.duplicate-card:active:not(.disabled) { background: var(--mob-green-bg); border-color: var(--mob-green); }
.duplicate-card.disabled { opacity: 0.5; cursor: not-allowed; }
.duplicate-name { font-size: 16px; font-weight: 600; color: var(--mob-text); margin-bottom: 6px; padding-right: 60px; }
.duplicate-fields { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.dup-field { font-size: 12px; color: var(--mob-text-muted); }
.duplicate-org { font-size: 12px; color: var(--mob-blue-soft); margin-top: 4px; }
.duplicate-qty {
  position: absolute; top: 14px; right: 14px; display: flex; align-items: center;
  gap: 4px; font-size: 16px; font-weight: 700; color: var(--mob-text-muted);
}
.duplicate-qty.has-qty { color: var(--mob-green); }
.duplicate-return-qty { color: var(--mob-amber-fg); margin-left: 4px; display: inline-flex; align-items: center; gap: 2px; }
.duplicate-qty i { font-size: 18px; }
.duplicate-resolving { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; color: var(--mob-amber-fg); font-size: 14px; font-weight: 600; }
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Image capture section */
.image-section { margin-bottom: 16px; }

.image-section-header { margin-bottom: 8px; }

.image-section-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--mob-text-secondary);
  margin: 0;
}

.camera-button-capture {
  width: 100%;
  padding: 12px;
  background: var(--mob-amber);
  border: none;
  border-radius: 8px;
  color: var(--mob-on-amber);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.camera-button-capture i { font-size: 20px; }
.camera-button-capture:active { background: var(--mob-amber);
  color: var(--mob-on-amber);
}

.images-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.image-thumbnail {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--mob-surface);
}

.image-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.remove-image {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  color: var(--mob-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Label settings */
.label-section {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--mob-surface);
  border: 1px solid var(--mob-border);
  border-radius: 8px;
}

.checkbox-group { margin-bottom: 8px; }

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 0;
}

.checkbox-box {
  width: 24px;
  height: 24px;
  border: 2px solid var(--mob-text-muted);
  border-radius: 6px;
  background: var(--mob-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.checkbox-box.checked {
  background: var(--mob-green);
  border-color: var(--mob-green);
  color: var(--mob-on-green);
}

.checkbox-box i {
  color: var(--mob-text);
  font-size: 16px;
}

.checkbox-text {
  font-size: 15px;
  color: var(--mob-text-secondary);
  font-weight: 600;
}

.label-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--mob-hover);
}

/* Article label section */
.article-label-section { margin-bottom: 16px; }

.article-label-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.article-label-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--mob-text-secondary);
}

.article-label-counter {
  background: var(--mob-blue-bg);
  color: var(--mob-blue-soft);
  border: 1px solid var(--mob-blue-border);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}

.checkbox-box.indeterminate {
  background: var(--mob-blue);
  border-color: var(--mob-blue);
  color: var(--mob-on-blue);
}

.master-select {
  padding: 8px 0;
  border-bottom: 1px solid var(--mob-hover);
  margin-bottom: 6px;
}

.master-select .checkbox-text .muted {
  color: var(--mob-text-muted);
  font-weight: 500;
  margin-left: 6px;
}

.article-label-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
}

.article-label-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  background: var(--mob-surface);
  border: 1.5px solid var(--mob-hover);
  border-radius: 8px;
  cursor: pointer;
}

.article-label-line:active { background: var(--mob-surface); }

.article-label-line.selected {
  border-color: var(--mob-green);
  background: rgba(34, 197, 94, 0.08);
}

.article-label-line-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.article-label-line-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--mob-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-label-line-meta {
  font-size: 12px;
  color: var(--mob-text-muted);
}

.article-label-line-qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--mob-surface);
  border: 1px solid var(--mob-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mob-text-secondary);
}

.article-label-line-qty i {
  color: var(--mob-blue);
  font-size: 14px;
}

.article-label-print-btn {
  margin-top: 10px;
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--mob-blue);
  border: none;
  border-radius: 8px;
  color: var(--mob-on-blue);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.article-label-print-btn:active:not(:disabled) { background: var(--mob-blue-hover); }

.article-label-print-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--mob-hover);
}

.label-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.label-control-label {
  font-size: 14px;
  color: var(--mob-text-muted);
  font-weight: 500;
  min-width: 80px;
}

.qty-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 2px solid var(--mob-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--mob-bg);
}

.qty-stepper-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mob-surface);
  border: none;
  color: var(--mob-text);
  font-size: 18px;
  cursor: pointer;
}

.qty-stepper-btn:active:not(:disabled) { background: var(--mob-hover); }
.qty-stepper-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.qty-stepper-input {
  width: 56px;
  height: 40px;
  text-align: center;
  background: var(--mob-bg);
  border: none;
  border-left: 1px solid var(--mob-border);
  border-right: 1px solid var(--mob-border);
  color: var(--mob-text);
  font-size: 18px;
  font-weight: 700;
  -moz-appearance: textfield;
}

.qty-stepper-input::-webkit-inner-spin-button,
.qty-stepper-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-stepper-input:focus { outline: none; }

.printer-select {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  background: var(--mob-bg);
  border: 2px solid var(--mob-border);
  border-radius: 8px;
  color: var(--mob-text);
  font-size: 15px;
  cursor: pointer;
}

.printer-select:focus { outline: none; border-color: var(--mob-blue); }

/* Camera modal */
.receive-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.receive-camera-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.receive-camera-header {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.receive-camera-header h3 {
  margin: 0;
  color: var(--mob-text);
  font-size: 18px;
  flex: 1;
}

.receive-camera-counter {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  background: var(--mob-blue);
  border: 2px solid #ffffff;
  border-radius: 50%;
  color: var(--mob-on-blue);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.receive-close-camera {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: var(--mob-text);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.receive-camera-video {
  flex: 1;
  width: 100%;
  object-fit: cover;
}

.receive-camera-controls {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
}

.receive-capture-button {
  width: 80px;
  height: 80px;
  background: var(--mob-blue);
  border: 4px solid #ffffff;
  border-radius: 50%;
  color: var(--mob-on-blue);
  font-size: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.receive-capture-button:active { background: var(--mob-blue-hover); }

.receive-exit-camera-button {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid #ffffff;
  border-radius: 24px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(4px);
}

.receive-exit-camera-button:active { background: rgba(255, 255, 255, 0.35); }
.receive-exit-camera-button i { font-size: 20px; }

.receive-image-modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.receive-image-modal-content img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
}

.receive-close-image-modal {
  position: absolute;
  top: -50px;
  right: 0;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: var(--mob-text);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mode toggle */
.mode-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  padding: 4px;
  background: var(--mob-surface);
  border: 1px solid var(--mob-hover);
  border-radius: 10px;
}

.mode-toggle-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--mob-text-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.mode-toggle-btn i { font-size: 18px; }
.mode-toggle-btn:active { background: var(--mob-hover); }

.mode-toggle-btn.active {
  background: var(--mob-blue-bg);
  color: var(--mob-blue-soft);
  box-shadow: inset 0 0 0 1px var(--mob-blue-border);
}

/* Lookup view */
.lookup-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lookup-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--mob-surface);
  border: 2px solid var(--mob-border);
  border-radius: 10px;
  padding: 4px;
}

.lookup-search-input {
  flex: 1;
  height: 48px;
  padding: 0 14px;
  background: transparent;
  border: none;
  color: var(--mob-text);
  font-size: 16px;
}

.lookup-search-input:focus { outline: none; }
.lookup-search-input::placeholder { color: var(--mob-text-muted); }

.lookup-search-go {
  width: 56px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mob-blue);
  border: none;
  border-radius: 8px;
  color: var(--mob-on-blue);
  font-size: 22px;
  cursor: pointer;
}

.lookup-search-go:disabled { opacity: 0.5; cursor: not-allowed; }
.lookup-search-go:active:not(:disabled) { background: var(--mob-blue-hover); }

.lookup-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lookup-header-card {
  background: var(--mob-surface);
  border: 1px solid var(--mob-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lookup-doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lookup-doc-no {
  font-size: 22px;
  font-weight: 800;
  color: var(--mob-text);
  letter-spacing: 0.5px;
  word-break: break-all;
}

.lookup-status-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--mob-hover);
  color: var(--mob-text-secondary);
  border: 1px solid var(--mob-border);
  flex-shrink: 0;
}

.lookup-status-badge.done {
  background: rgba(34, 197, 94, 0.15);
  color: var(--mob-green-fg);
  border-color: var(--mob-green-border);
}

.lookup-info-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lookup-info-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
}

.lookup-info-label {
  color: var(--mob-text-muted);
  flex-shrink: 0;
}

.lookup-info-value {
  color: var(--mob-text);
  text-align: right;
  font-weight: 500;
  word-break: break-word;
}

.lookup-summary-row {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--mob-hover);
}

.lookup-summary-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--mob-bg);
  border: 1px solid var(--mob-hover);
  border-radius: 999px;
  color: var(--mob-text) !important;
  font-size: 13px;
  font-weight: 600;
}

.lookup-summary-chip span { color: var(--mob-text) !important; }
.lookup-summary-chip i { font-size: 16px; color: var(--mob-blue-soft) !important; }

.lookup-section {
  background: var(--mob-surface);
  border: 1px solid var(--mob-border);
  border-radius: 10px;
  padding: 12px 14px;
}

.lookup-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--mob-text-secondary);
  margin-bottom: 10px;
}

.lookup-empty {
  padding: 10px 0;
  color: var(--mob-text-muted);
  font-size: 14px;
  text-align: center;
}

.lookup-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lookup-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--mob-bg);
  border: 1px solid var(--mob-hover);
  border-radius: 8px;
}

.lookup-line-main {
  flex: 1;
  min-width: 0;
}

.lookup-line-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--mob-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lookup-line-meta {
  font-size: 12px;
  color: var(--mob-text-secondary) !important;
  margin-top: 2px;
}
.lookup-line-meta span { color: var(--mob-text-secondary) !important; }
.lookup-line-meta i { font-size: 12px; vertical-align: -1px; color: var(--mob-text-secondary) !important; }

.lookup-line-qty {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.lookup-line-qty-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--mob-blue);
  line-height: 1;
}

.lookup-line-qty-uom {
  font-size: 11px;
  color: var(--mob-text-muted);
  margin-top: 2px;
}

.lookup-attachments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.lookup-attachment {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--mob-bg);
  border: 1px solid var(--mob-hover);
}

.lookup-attachment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.lookup-attachment-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 8px;
  color: var(--mob-blue-soft);
  text-decoration: none;
  text-align: center;
}

.lookup-attachment-file i { font-size: 32px; }
.lookup-attachment-file span {
  font-size: 10px;
  word-break: break-all;
  line-height: 1.2;
}
</style>