@codingfactory/inventory-locator-client 0.1.0

package/src/components/counting/CountEntryForm.vue

@@ -0,0 +1,833 @@
+<template>
+  <div class="count-entry">
+    <!-- Header bar -->
+    <div class="count-entry__header">
+      <button
+        type="button"
+        class="count-entry__back-btn"
+        aria-label="Go back"
+        @click="handleBack"
+      >
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+          <path d="M13 4L7 10L13 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+        <span>Back</span>
+      </button>
+      <span v-if="session" class="count-entry__session-name">{{ session.name }}</span>
+      <span v-if="session" class="count-entry__location-count">
+        {{ session.progress.counted }}/{{ session.progress.total }} locations
+      </span>
+    </div>
+
+    <!-- Online/offline indicator -->
+    <div
+      class="count-entry__connectivity"
+      :class="{ 'count-entry__connectivity--offline': !isOnline }"
+      role="status"
+    >
+      <span v-if="isOnline" class="count-entry__connectivity-dot count-entry__connectivity-dot--online" aria-hidden="true" />
+      <span v-else class="count-entry__connectivity-dot count-entry__connectivity-dot--offline" aria-hidden="true" />
+      <span>{{ isOnline ? 'Online' : 'Offline -- counts will sync when connected' }}</span>
+    </div>
+
+    <!-- Location selector (when no location) -->
+    <div v-if="!currentLocation" class="count-entry__no-location">
+      <InvCard title="Select Location">
+        <p class="count-entry__no-location-text">
+          Scan a QR code or search for a location to begin counting.
+        </p>
+        <div class="count-entry__no-location-actions">
+          <InvButton variant="primary" size="lg" @click="handleScanLocation">
+            <template #icon-left>
+              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+                <rect x="2" y="2" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.5" />
+                <rect x="11" y="2" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.5" />
+                <rect x="2" y="11" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.5" />
+                <rect x="11" y="11" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.5" />
+              </svg>
+            </template>
+            Scan QR Code
+          </InvButton>
+          <div class="count-entry__search-row">
+            <input
+              v-model="locationSearchQuery"
+              type="search"
+              class="count-entry__search-input"
+              placeholder="Search location by code..."
+              @input="handleLocationSearch"
+            />
+          </div>
+          <ul
+            v-if="locationSearchResults.length > 0"
+            class="count-entry__search-results"
+            role="listbox"
+            aria-label="Location search results"
+          >
+            <li
+              v-for="loc in locationSearchResults"
+              :key="loc.id"
+              role="option"
+              :aria-selected="false"
+            >
+              <button
+                type="button"
+                class="count-entry__search-result-btn"
+                @click="selectLocation(loc)"
+              >
+                <LocationCodeBadge :code="loc.full_code" />
+                <span>{{ loc.name }}</span>
+              </button>
+            </li>
+          </ul>
+        </div>
+      </InvCard>
+    </div>
+
+    <!-- Counting screen -->
+    <template v-if="currentLocation">
+      <!-- Current location card -->
+      <div class="count-entry__location-card">
+        <LocationCodeBadge :code="currentLocation.full_code" />
+        <div class="count-entry__location-details">
+          <h2 class="count-entry__location-name">{{ currentLocation.name }}</h2>
+          <LocationBreadcrumb
+            v-if="currentLocation.path && currentLocation.path.length > 0"
+            :path="currentLocation.path"
+            @navigate="() => {}"
+          />
+        </div>
+      </div>
+
+      <!-- Products list -->
+      <div class="count-entry__products" role="list" aria-label="Products to count">
+        <p v-if="locationEntries.length === 0" class="count-entry__no-entries">
+          No entries for this location. Generate entries first.
+        </p>
+        <div
+          v-for="(entry, index) in locationEntries"
+          :key="entry.id"
+          role="listitem"
+          class="count-entry__product-row"
+          :class="{
+            'count-entry__product-row--selected': selectedIndex === index,
+            'count-entry__product-row--match': entry.counted_quantity !== null && entry.discrepancy === 0,
+            'count-entry__product-row--discrepancy': entry.counted_quantity !== null && entry.discrepancy !== null && entry.discrepancy !== 0,
+          }"
+          @click="selectProduct(index)"
+        >
+          <div class="count-entry__product-info">
+            <span class="count-entry__product-name">{{ entry.product_name }}</span>
+            <span class="count-entry__product-expected">
+              Expected: {{ entry.expected_quantity ?? '-' }}
+            </span>
+          </div>
+          <div class="count-entry__product-count">
+            <label :for="`count-input-${entry.id}`" class="sr-only">
+              Counted quantity for {{ entry.product_name }}
+            </label>
+            <input
+              :id="`count-input-${entry.id}`"
+              :ref="(el) => { if (el) countInputRefs[index] = el as HTMLInputElement }"
+              type="text"
+              inputmode="decimal"
+              class="count-entry__count-input"
+              :class="{
+                'count-entry__count-input--match': localCounts[index] !== '' && Number(localCounts[index]) === entry.expected_quantity,
+                'count-entry__count-input--discrepancy': localCounts[index] !== '' && Number(localCounts[index]) !== entry.expected_quantity,
+              }"
+              :value="localCounts[index]"
+              readonly
+              @focus="selectProduct(index)"
+            />
+            <span
+              v-if="entry.counted_quantity !== null && entry.discrepancy === 0"
+              class="count-entry__status-icon count-entry__status-icon--match"
+              aria-label="Match"
+            >
+              &#x2713;
+            </span>
+            <span
+              v-else-if="entry.counted_quantity !== null && entry.discrepancy !== null && entry.discrepancy !== 0"
+              class="count-entry__status-icon count-entry__status-icon--discrepancy"
+              aria-label="Discrepancy"
+            >
+              &#x26A0;
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Keypad -->
+      <div class="count-entry__keypad" role="group" aria-label="Numeric keypad">
+        <button
+          v-for="key in keypadKeys"
+          :key="key.label"
+          type="button"
+          class="count-entry__key"
+          :aria-label="key.ariaLabel || key.label"
+          :disabled="selectedIndex === null"
+          @click="handleKeyPress(key.value)"
+        >
+          {{ key.label }}
+        </button>
+      </div>
+
+      <!-- Bottom actions -->
+      <div class="count-entry__bottom-actions">
+        <InvButton
+          variant="primary"
+          size="lg"
+          :disabled="!allCounted"
+          :loading="completing"
+          class="count-entry__complete-btn"
+          @click="handleCompleteLocation"
+        >
+          Complete Location
+        </InvButton>
+        <InvButton
+          variant="secondary"
+          size="lg"
+          class="count-entry__scan-next-btn"
+          @click="handleScanLocation"
+        >
+          <template #icon-left>
+            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+              <rect x="2" y="2" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.5" />
+              <rect x="11" y="2" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.5" />
+              <rect x="2" y="11" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.5" />
+              <rect x="11" y="11" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.5" />
+            </svg>
+          </template>
+          Scan Next Location
+        </InvButton>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import { useCountSessions } from '../../composables/useCountSessions'
+import { useLocations } from '../../composables/useLocations'
+import { useLocationSearch } from '../../composables/useLocationSearch'
+import { useCountStore } from '../../stores/countStore'
+import type { Location, CountEntry } from '../../types'
+import InvCard from '../shared/InvCard.vue'
+import InvButton from '../shared/InvButton.vue'
+import LocationCodeBadge from '../locations/LocationCodeBadge.vue'
+import LocationBreadcrumb from '../locations/LocationBreadcrumb.vue'
+
+const props = defineProps<{
+  sessionId: number
+  locationId?: number | null
+}>()
+
+const router = useRouter()
+const countStore = useCountStore()
+const {
+  currentSession: session,
+  entries,
+  fetchSession,
+  fetchEntries,
+  submitCount,
+} = useCountSessions()
+
+const locationsApi = useLocations()
+const locationSearch = useLocationSearch()
+
+const currentLocation = ref<Location | null>(null)
+const selectedIndex = ref<number | null>(null)
+const localCounts = ref<string[]>([])
+const countInputRefs: Record<number, HTMLInputElement> = {}
+const completing = ref(false)
+const isOnline = ref(navigator.onLine)
+const locationSearchQuery = ref('')
+const locationSearchResults = ref<Location[]>([])
+
+interface KeypadKey {
+  label: string
+  value: string
+  ariaLabel?: string
+  wide?: boolean
+}
+
+const keypadKeys: KeypadKey[] = [
+  { label: '7', value: '7' },
+  { label: '8', value: '8' },
+  { label: '9', value: '9' },
+  { label: '4', value: '4' },
+  { label: '5', value: '5' },
+  { label: '6', value: '6' },
+  { label: '1', value: '1' },
+  { label: '2', value: '2' },
+  { label: '3', value: '3' },
+  { label: '.', value: '.', ariaLabel: 'Decimal point' },
+  { label: '0', value: '0' },
+  { label: '\u232B', value: 'backspace', ariaLabel: 'Backspace' },
+]
+
+const locationEntries = computed<CountEntry[]>(() => {
+  if (!currentLocation.value) return []
+  return entries.value.filter(e => e.location_id === currentLocation.value!.id)
+})
+
+const allCounted = computed(() => {
+  if (locationEntries.value.length === 0) return false
+  return localCounts.value.every(c => c !== '')
+})
+
+onMounted(async () => {
+  countStore.loadQueue()
+  window.addEventListener('online', handleOnline)
+  window.addEventListener('offline', handleOffline)
+
+  await fetchSession(props.sessionId)
+  await fetchEntries(props.sessionId)
+
+  if (props.locationId) {
+    try {
+      const loc = await locationsApi.fetchLocation(props.locationId)
+      setLocation(loc)
+    } catch {
+      // Location not found, show picker
+    }
+  }
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('online', handleOnline)
+  window.removeEventListener('offline', handleOffline)
+})
+
+watch(locationEntries, (newEntries) => {
+  localCounts.value = newEntries.map(e =>
+    e.counted_quantity !== null ? String(e.counted_quantity) : ''
+  )
+  selectedIndex.value = newEntries.findIndex(e => e.counted_quantity === null)
+  if (selectedIndex.value === -1 && newEntries.length > 0) {
+    selectedIndex.value = 0
+  }
+})
+
+function handleOnline() {
+  isOnline.value = true
+  syncPending()
+}
+
+function handleOffline() {
+  isOnline.value = false
+}
+
+async function syncPending() {
+  await countStore.syncPendingCounts(async (pending) => {
+    await submitCount(pending.sessionId, pending.entryId, pending.countedQuantity, pending.notes)
+  })
+}
+
+function setLocation(location: Location) {
+  currentLocation.value = location
+  countStore.setCurrentLocation(location.id)
+}
+
+function selectProduct(index: number) {
+  selectedIndex.value = index
+  nextTick(() => {
+    countInputRefs[index]?.focus()
+  })
+}
+
+function handleKeyPress(value: string) {
+  if (selectedIndex.value === null) return
+  const idx = selectedIndex.value
+  let current = localCounts.value[idx]
+
+  if (value === 'backspace') {
+    localCounts.value[idx] = current.slice(0, -1)
+    return
+  }
+
+  if (value === '.') {
+    if (current.includes('.')) return
+    localCounts.value[idx] = current + '.'
+    return
+  }
+
+  // First digit clears existing counted value if it came from server
+  const entry = locationEntries.value[idx]
+  if (entry.counted_quantity !== null && current === String(entry.counted_quantity)) {
+    localCounts.value[idx] = value
+    return
+  }
+
+  localCounts.value[idx] = current + value
+}
+
+async function submitCurrentCount() {
+  if (selectedIndex.value === null) return
+  const idx = selectedIndex.value
+  const entry = locationEntries.value[idx]
+  const countVal = localCounts.value[idx]
+  if (countVal === '') return
+
+  const quantity = parseFloat(countVal)
+  if (isNaN(quantity)) return
+
+  if (isOnline.value) {
+    try {
+      await submitCount(props.sessionId, entry.id, quantity)
+    } catch {
+      countStore.queueCount({
+        sessionId: props.sessionId,
+        entryId: entry.id,
+        countedQuantity: quantity,
+      })
+    }
+  } else {
+    countStore.queueCount({
+      sessionId: props.sessionId,
+      entryId: entry.id,
+      countedQuantity: quantity,
+    })
+  }
+
+  // Advance to next uncounted
+  const nextIdx = localCounts.value.findIndex((c, i) => i > idx && c === '')
+  if (nextIdx !== -1) {
+    selectProduct(nextIdx)
+  }
+}
+
+async function handleCompleteLocation() {
+  completing.value = true
+  try {
+    for (let i = 0; i < locationEntries.value.length; i++) {
+      const countVal = localCounts.value[i]
+      if (countVal === '') continue
+      const entry = locationEntries.value[i]
+      const quantity = parseFloat(countVal)
+      if (isNaN(quantity)) continue
+      if (entry.counted_quantity !== null && entry.counted_quantity === quantity) continue
+
+      if (isOnline.value) {
+        try {
+          await submitCount(props.sessionId, entry.id, quantity)
+        } catch {
+          countStore.queueCount({
+            sessionId: props.sessionId,
+            entryId: entry.id,
+            countedQuantity: quantity,
+          })
+        }
+      } else {
+        countStore.queueCount({
+          sessionId: props.sessionId,
+          entryId: entry.id,
+          countedQuantity: quantity,
+        })
+      }
+    }
+    await fetchEntries(props.sessionId)
+    await fetchSession(props.sessionId)
+  } finally {
+    completing.value = false
+  }
+}
+
+function handleScanLocation() {
+  router.push({ name: 'inventory-scan' })
+}
+
+function handleBack() {
+  router.push({ name: 'inventory-count-detail', params: { id: props.sessionId } })
+}
+
+function handleLocationSearch() {
+  locationSearch.search(locationSearchQuery.value)
+  locationSearchResults.value = locationSearch.results.value
+}
+
+async function selectLocation(location: Location) {
+  const full = await locationsApi.fetchLocation(location.id)
+  setLocation(full)
+  locationSearchQuery.value = ''
+  locationSearchResults.value = []
+}
+</script>
+
+<style scoped>
+.count-entry {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: var(--admin-content-bg);
+}
+
+.count-entry__header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3, 0.75rem);
+  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+  background: var(--admin-card-bg);
+  border-bottom: 1px solid var(--admin-border);
+  flex-shrink: 0;
+}
+
+.count-entry__back-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1, 0.25rem);
+  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
+  border: none;
+  border-radius: 6px;
+  background: none;
+  color: var(--color-primary, #2563eb);
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 500;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.count-entry__back-btn:hover {
+  background: var(--admin-content-bg);
+}
+
+.count-entry__back-btn:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+.count-entry__session-name {
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 600;
+  color: var(--admin-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  flex: 1;
+}
+
+.count-entry__location-count {
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-tertiary);
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+
+.count-entry__connectivity {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  padding: var(--space-1, 0.25rem) var(--space-4, 1rem);
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--color-success, #059669);
+  background: color-mix(in srgb, var(--color-success, #059669) 8%, var(--admin-card-bg));
+  flex-shrink: 0;
+}
+
+.count-entry__connectivity--offline {
+  color: var(--color-warning, #d97706);
+  background: color-mix(in srgb, var(--color-warning, #d97706) 8%, var(--admin-card-bg));
+}
+
+.count-entry__connectivity-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.count-entry__connectivity-dot--online {
+  background: var(--color-success, #059669);
+}
+
+.count-entry__connectivity-dot--offline {
+  background: var(--color-warning, #d97706);
+}
+
+.count-entry__no-location {
+  padding: var(--space-4, 1rem);
+  flex: 1;
+}
+
+.count-entry__no-location-text {
+  margin: 0 0 var(--space-4, 1rem);
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-secondary);
+}
+
+.count-entry__no-location-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3, 0.75rem);
+}
+
+.count-entry__search-row {
+  display: flex;
+  gap: var(--space-2, 0.5rem);
+}
+
+.count-entry__search-input {
+  flex: 1;
+  height: 44px;
+  padding: 0 var(--space-3, 0.75rem);
+  border: 1px solid var(--admin-border);
+  border-radius: 6px;
+  background: var(--admin-card-bg);
+  color: var(--admin-text-primary);
+  font-size: var(--text-sm, 0.875rem);
+  outline: none;
+}
+
+.count-entry__search-input:focus {
+  border-color: var(--color-primary, #2563eb);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+}
+
+.count-entry__search-results {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border: 1px solid var(--admin-border);
+  border-radius: 6px;
+  max-height: 200px;
+  overflow-y: auto;
+  background: var(--admin-card-bg);
+}
+
+.count-entry__search-result-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  width: 100%;
+  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+  border: none;
+  background: none;
+  color: var(--admin-text-primary);
+  font-size: var(--text-sm, 0.875rem);
+  cursor: pointer;
+  text-align: left;
+}
+
+.count-entry__search-result-btn:hover {
+  background: var(--admin-content-bg);
+}
+
+.count-entry__search-result-btn:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: -2px;
+}
+
+.count-entry__location-card {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3, 0.75rem);
+  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+  background: var(--admin-card-bg);
+  border-bottom: 1px solid var(--admin-border);
+  flex-shrink: 0;
+}
+
+.count-entry__location-details {
+  min-width: 0;
+}
+
+.count-entry__location-name {
+  margin: 0;
+  font-size: var(--text-base, 1rem);
+  font-weight: 600;
+  color: var(--admin-text-primary);
+}
+
+.count-entry__products {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-2, 0.5rem) 0;
+}
+
+.count-entry__no-entries {
+  padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
+  text-align: center;
+  color: var(--admin-text-tertiary);
+  font-style: italic;
+  font-size: var(--text-sm, 0.875rem);
+  margin: 0;
+}
+
+.count-entry__product-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3, 0.75rem);
+  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+  background: var(--admin-card-bg);
+  border-bottom: 1px solid var(--admin-border);
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+
+.count-entry__product-row:hover {
+  background: var(--admin-content-bg);
+}
+
+.count-entry__product-row--selected {
+  background: color-mix(in srgb, var(--color-primary, #2563eb) 8%, var(--admin-card-bg));
+  border-left: 3px solid var(--color-primary, #2563eb);
+}
+
+.count-entry__product-row--match {
+  border-left: 3px solid var(--color-success, #059669);
+}
+
+.count-entry__product-row--discrepancy {
+  border-left: 3px solid var(--color-warning, #d97706);
+}
+
+.count-entry__product-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1, 0.25rem);
+  min-width: 0;
+}
+
+.count-entry__product-name {
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 500;
+  color: var(--admin-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.count-entry__product-expected {
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+.count-entry__product-count {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  flex-shrink: 0;
+}
+
+.count-entry__count-input {
+  width: 80px;
+  height: 44px;
+  padding: 0 var(--space-2, 0.5rem);
+  border: 2px solid var(--admin-border);
+  border-radius: 6px;
+  background: var(--admin-card-bg);
+  color: var(--admin-text-primary);
+  font-size: var(--text-lg, 1.125rem);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  outline: none;
+}
+
+.count-entry__count-input:focus {
+  border-color: var(--color-primary, #2563eb);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+}
+
+.count-entry__count-input--match {
+  border-color: var(--color-success, #059669);
+  color: var(--color-success, #059669);
+}
+
+.count-entry__count-input--discrepancy {
+  border-color: var(--color-warning, #d97706);
+  color: var(--color-warning, #d97706);
+}
+
+.count-entry__status-icon {
+  font-size: var(--text-lg, 1.125rem);
+}
+
+.count-entry__status-icon--match {
+  color: var(--color-success, #059669);
+}
+
+.count-entry__status-icon--discrepancy {
+  color: var(--color-warning, #d97706);
+}
+
+.count-entry__keypad {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-2, 0.5rem);
+  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+  background: var(--admin-card-bg);
+  border-top: 1px solid var(--admin-border);
+  flex-shrink: 0;
+}
+
+.count-entry__key {
+  min-height: 60px;
+  min-width: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--admin-border);
+  border-radius: 8px;
+  background: var(--admin-content-bg);
+  color: var(--admin-text-primary);
+  font-size: var(--text-xl, 1.25rem);
+  font-weight: 600;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.1s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.count-entry__key:hover:not(:disabled) {
+  background: var(--admin-table-header-bg);
+}
+
+.count-entry__key:active:not(:disabled) {
+  background: var(--admin-border);
+  transform: scale(0.97);
+}
+
+.count-entry__key:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.count-entry__key:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+.count-entry__bottom-actions {
+  display: flex;
+  gap: var(--space-2, 0.5rem);
+  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+  background: var(--admin-card-bg);
+  border-top: 1px solid var(--admin-border);
+  flex-shrink: 0;
+}
+
+.count-entry__complete-btn {
+  flex: 1;
+}
+
+.count-entry__scan-next-btn {
+  flex-shrink: 0;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+</style>