@codingfactory/inventory-locator-client 0.1.0

package/src/components/locations/LocationDetail.vue

@@ -0,0 +1,884 @@
+<template>
+  <div class="location-detail">
+    <!-- Loading state -->
+    <div v-if="loading" class="location-detail__loading" aria-live="polite">
+      <div class="location-detail__loading-header">
+        <div class="location-detail__skeleton location-detail__skeleton--breadcrumb" />
+        <div class="location-detail__skeleton location-detail__skeleton--title" />
+        <div class="location-detail__skeleton location-detail__skeleton--badges" />
+      </div>
+      <div class="location-detail__skeleton location-detail__skeleton--card" />
+      <div class="location-detail__skeleton location-detail__skeleton--card" />
+      <span class="sr-only">Loading location details...</span>
+    </div>
+
+    <!-- Error state -->
+    <InvEmptyState
+      v-else-if="error"
+      title="Failed to load location"
+      :description="error"
+      action-label="Retry"
+      @action="loadLocation"
+    />
+
+    <!-- Detail content -->
+    <template v-else-if="location">
+      <!-- 1. Header bar -->
+      <header class="location-detail__header">
+        <LocationBreadcrumb
+          v-if="location.path && location.path.length > 0"
+          :path="location.path"
+          @navigate="handleBreadcrumbNavigate"
+        />
+
+        <div class="location-detail__title-row">
+          <div class="location-detail__title-area">
+            <LocationTypeIcon :type="location.type" size="lg" />
+            <h1 class="location-detail__name">{{ location.name }}</h1>
+            <LocationCodeBadge :code="location.full_code" />
+            <InvBadge variant="muted" size="sm">{{ location.type_label }}</InvBadge>
+            <InvBadge
+              :variant="location.is_active ? 'success' : 'error'"
+              size="sm"
+            >
+              {{ location.is_active ? 'Active' : 'Inactive' }}
+            </InvBadge>
+          </div>
+
+          <div class="location-detail__actions">
+            <InvButton variant="secondary" size="sm" @click="showEditForm = true">
+              <template #icon-left>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                  <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                  <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+              </template>
+              Edit
+            </InvButton>
+            <InvButton variant="secondary" size="sm" @click="handlePrintLabel">
+              <template #icon-left>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                  <path d="M6 9V2h12v7M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                  <rect x="6" y="14" width="12" height="8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+              </template>
+              Print Label
+            </InvButton>
+            <InvButton variant="danger" size="sm" @click="handleDelete">
+              <template #icon-left>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                  <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+              </template>
+              Delete
+            </InvButton>
+          </div>
+        </div>
+      </header>
+
+      <!-- 2. Info card -->
+      <InvCard
+        v-if="location.description || location.metadata"
+        title="Details"
+        compact
+      >
+        <div class="location-detail__info-grid">
+          <div v-if="location.description" class="location-detail__info-item">
+            <span class="location-detail__info-label">Description</span>
+            <p class="location-detail__info-value">{{ location.description }}</p>
+          </div>
+          <div class="location-detail__info-item">
+            <span class="location-detail__info-label">Created</span>
+            <span class="location-detail__info-value">{{ formatDate(location.created_at) }}</span>
+          </div>
+          <div class="location-detail__info-item">
+            <span class="location-detail__info-label">Last Updated</span>
+            <span class="location-detail__info-value">{{ formatDate(location.updated_at) }}</span>
+          </div>
+          <div v-if="location.is_mobile" class="location-detail__info-item">
+            <span class="location-detail__info-label">Mobile</span>
+            <InvBadge variant="info" size="sm">Mobile Location</InvBadge>
+          </div>
+        </div>
+      </InvCard>
+
+      <!-- 3. Children card -->
+      <InvCard
+        v-if="children.length > 0 || location.children_count"
+        title="Child Locations"
+        compact
+        no-padding
+      >
+        <template #actions>
+          <InvButton variant="ghost" size="sm" @click="showCreateChildForm = true">
+            + Add Child
+          </InvButton>
+        </template>
+        <InvTable
+          :columns="childColumns"
+          :data="children"
+          :loading="childrenLoading"
+          clickable
+          empty-message="No child locations."
+          @row-click="handleChildClick"
+        >
+          <template #cell-name="{ row }">
+            <div class="location-detail__child-cell">
+              <LocationTypeIcon :type="row.type" size="sm" />
+              <span>{{ row.name }}</span>
+            </div>
+          </template>
+          <template #cell-type_label="{ value }">
+            <InvBadge variant="muted" size="sm">{{ value }}</InvBadge>
+          </template>
+          <template #cell-full_code="{ value }">
+            <LocationCodeBadge :code="value" />
+          </template>
+          <template #cell-product_count="{ value }">
+            <span class="location-detail__count">{{ value ?? 0 }}</span>
+          </template>
+        </InvTable>
+      </InvCard>
+
+      <!-- 4. Products card -->
+      <InvCard
+        title="Products"
+        compact
+        no-padding
+      >
+        <template #actions>
+          <span class="location-detail__product-count-label">
+            {{ products.length }} {{ products.length === 1 ? 'product' : 'products' }}
+          </span>
+        </template>
+        <div v-if="productsLoading" class="location-detail__loading-inline">
+          <div class="location-detail__skeleton location-detail__skeleton--row" />
+          <div class="location-detail__skeleton location-detail__skeleton--row" />
+          <div class="location-detail__skeleton location-detail__skeleton--row" />
+        </div>
+        <div v-else-if="products.length === 0" class="location-detail__empty-inline">
+          <p>No products at this location.</p>
+        </div>
+        <InvTable
+          v-else
+          :columns="productColumns"
+          :data="products"
+          empty-message="No products at this location."
+        >
+          <template #cell-product_name="{ row }">
+            <div class="location-detail__product-cell">
+              <span class="location-detail__product-name">{{ row.product_name }}</span>
+              <span v-if="row.product_sku" class="location-detail__product-sku">
+                {{ row.product_sku }}
+              </span>
+            </div>
+          </template>
+          <template #cell-quantity="{ value }">
+            <strong>{{ formatQuantity(value) }}</strong>
+          </template>
+          <template #cell-is_primary="{ value }">
+            <InvBadge v-if="value" variant="default" size="sm">Primary</InvBadge>
+          </template>
+        </InvTable>
+      </InvCard>
+
+      <!-- 5. Recent movements card -->
+      <InvCard
+        title="Recent Movements"
+        compact
+        no-padding
+        collapsible
+      >
+        <div v-if="movementsLoading" class="location-detail__loading-inline">
+          <div class="location-detail__skeleton location-detail__skeleton--row" />
+          <div class="location-detail__skeleton location-detail__skeleton--row" />
+        </div>
+        <div v-else-if="movements.length === 0" class="location-detail__empty-inline">
+          <p>No recent movements.</p>
+        </div>
+        <div v-else class="location-detail__movements-list">
+          <div
+            v-for="movement in movements"
+            :key="movement.id"
+            class="location-detail__movement"
+          >
+            <div class="location-detail__movement-icon" :class="`location-detail__movement-icon--${movement.reason}`">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                <path
+                  v-if="movement.reason === 'placed' || movement.reason === 'received'"
+                  d="M12 5v14M5 12l7 7 7-7"
+                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                />
+                <path
+                  v-else-if="movement.reason === 'picked'"
+                  d="M12 19V5M5 12l7-7 7 7"
+                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                />
+                <path
+                  v-else-if="movement.reason === 'moved'"
+                  d="M5 12h14M12 5l7 7-7 7"
+                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                />
+                <path
+                  v-else
+                  d="M4 4l16 16M20 4L4 20"
+                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                  opacity="0.6"
+                />
+              </svg>
+            </div>
+            <div class="location-detail__movement-info">
+              <span class="location-detail__movement-primary">
+                <strong>{{ movement.reason_label }}</strong>
+                {{ movement.product_name }}
+                <span class="location-detail__movement-qty">
+                  (qty: {{ formatQuantity(movement.quantity) }})
+                </span>
+              </span>
+              <span class="location-detail__movement-meta">
+                {{ movement.performer_name || 'System' }} &middot; {{ timeAgo(movement.performed_at) }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </InvCard>
+
+      <!-- 6. Label preview card -->
+      <InvCard
+        title="Label Preview"
+        compact
+        collapsible
+        :collapsed="true"
+      >
+        <template #actions>
+          <InvButton variant="ghost" size="sm" @click="handlePrintLabel">
+            Print
+          </InvButton>
+        </template>
+        <div v-if="labelData" class="location-detail__label-preview">
+          <div
+            v-if="labelData.qr_code_svg"
+            class="location-detail__label-qr"
+            v-html="labelData.qr_code_svg"
+          />
+          <div class="location-detail__label-info">
+            <strong>{{ labelData.location.name }}</strong>
+            <span class="location-detail__label-code">{{ labelData.location.full_code }}</span>
+            <span class="location-detail__label-path">{{ labelData.path }}</span>
+          </div>
+        </div>
+        <div v-else class="location-detail__empty-inline">
+          <p>
+            <InvButton variant="secondary" size="sm" :loading="labelLoading" @click="loadLabel">
+              Load Label Preview
+            </InvButton>
+          </p>
+        </div>
+      </InvCard>
+    </template>
+
+    <!-- Edit form modal -->
+    <LocationForm
+      :show="showEditForm"
+      :location="location"
+      @update:show="showEditForm = $event"
+      @saved="handleLocationSaved"
+    />
+
+    <!-- Create child form modal -->
+    <LocationForm
+      :show="showCreateChildForm"
+      :parent-id="location?.id || null"
+      @update:show="showCreateChildForm = $event"
+      @saved="handleChildCreated"
+    />
+
+    <!-- Delete confirmation modal -->
+    <InvModal
+      :show="showDeleteConfirm"
+      title="Delete Location"
+      description="This action cannot be undone. All child locations and product associations will be removed."
+      size="sm"
+      @update:show="showDeleteConfirm = $event"
+    >
+      <p class="location-detail__delete-warning">
+        Are you sure you want to delete <strong>{{ location?.name }}</strong>?
+      </p>
+      <template #footer>
+        <InvButton variant="secondary" @click="showDeleteConfirm = false">
+          Cancel
+        </InvButton>
+        <InvButton variant="danger" :loading="deleting" @click="confirmDelete">
+          Delete Location
+        </InvButton>
+      </template>
+    </InvModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+import type { Location, LocationProduct, Movement, LabelData, Column } from '../../types'
+import { useLocations } from '../../composables/useLocations'
+import { useLocationProducts } from '../../composables/useLocationProducts'
+import { useMovements } from '../../composables/useMovements'
+import { useLabelPrinting } from '../../composables/useLabelPrinting'
+import { useLocationStore } from '../../stores/locationStore'
+import { formatQuantity, timeAgo } from '../../utils/codeFormatter'
+import InvCard from '../shared/InvCard.vue'
+import InvTable from '../shared/InvTable.vue'
+import InvBadge from '../shared/InvBadge.vue'
+import InvButton from '../shared/InvButton.vue'
+import InvModal from '../shared/InvModal.vue'
+import InvEmptyState from '../shared/InvEmptyState.vue'
+import LocationBreadcrumb from './LocationBreadcrumb.vue'
+import LocationTypeIcon from './LocationTypeIcon.vue'
+import LocationCodeBadge from './LocationCodeBadge.vue'
+import LocationForm from './LocationForm.vue'
+
+const props = withDefaults(defineProps<{
+  locationCode?: string
+  locationId?: number
+}>(), {
+  locationCode: undefined,
+  locationId: undefined,
+})
+
+const emit = defineEmits<{
+  navigate: [location: Location]
+  deleted: []
+}>()
+
+const locationStore = useLocationStore()
+const { fetchLocation, fetchChildren, remove } = useLocations()
+const { fetchProducts: fetchLocationProducts } = useLocationProducts()
+const { fetchByLocation: fetchLocationMovements } = useMovements()
+const { fetchLabel: fetchLocationLabel, printLabel: printLocationLabel } = useLabelPrinting()
+
+const location = ref<Location | null>(null)
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+const children = ref<Location[]>([])
+const childrenLoading = ref(false)
+
+const products = ref<LocationProduct[]>([])
+const productsLoading = ref(false)
+
+const movements = ref<Movement[]>([])
+const movementsLoading = ref(false)
+
+const labelData = ref<LabelData | null>(null)
+const labelLoading = ref(false)
+
+const showEditForm = ref(false)
+const showCreateChildForm = ref(false)
+const showDeleteConfirm = ref(false)
+const deleting = ref(false)
+
+const childColumns: Column[] = [
+  { key: 'name', label: 'Name' },
+  { key: 'type_label', label: 'Type', width: '100px' },
+  { key: 'full_code', label: 'Code', width: '140px' },
+  { key: 'product_count', label: 'Products', width: '90px', align: 'right' },
+]
+
+const productColumns: Column[] = [
+  { key: 'product_name', label: 'Product' },
+  { key: 'quantity', label: 'Qty', width: '80px', align: 'right' },
+  { key: 'is_primary', label: 'Primary', width: '90px', align: 'center' },
+]
+
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+async function loadLocation() {
+  if (!props.locationId && !props.locationCode) return
+
+  loading.value = true
+  error.value = null
+
+  try {
+    let loc: Location
+
+    if (props.locationId) {
+      loc = await fetchLocation(props.locationId)
+    } else if (props.locationCode) {
+      // Look up by code - use fetchLocation with the store lookup first
+      const found = findByCode(props.locationCode)
+      if (found) {
+        loc = await fetchLocation(found.id)
+      } else {
+        // Fallback: search by code is not directly supported, so rely on the store
+        error.value = 'Location not found'
+        return
+      }
+    } else {
+      return
+    }
+
+    location.value = loc
+    locationStore.selectLocation(loc.id)
+
+    // Load related data in parallel
+    await Promise.allSettled([
+      loadChildren(loc.id),
+      loadProducts(loc.id),
+      loadMovements(loc.id),
+    ])
+  } catch (err: any) {
+    error.value = err.response?.data?.message || 'Failed to load location'
+  } finally {
+    loading.value = false
+  }
+}
+
+function findByCode(code: string): Location | null {
+  const search = (nodes: Location[]): Location | null => {
+    for (const node of nodes) {
+      if (node.full_code === code) return node
+      if (node.children) {
+        const found = search(node.children)
+        if (found) return found
+      }
+    }
+    return null
+  }
+  return search(locationStore.roots)
+}
+
+async function loadChildren(locationId: number) {
+  childrenLoading.value = true
+  try {
+    children.value = await fetchChildren(locationId)
+  } catch {
+    children.value = []
+  } finally {
+    childrenLoading.value = false
+  }
+}
+
+async function loadProducts(locationId: number) {
+  productsLoading.value = true
+  try {
+    const { fetchProducts } = useLocationProducts()
+    await fetchProducts(locationId)
+    // The composable stores results internally, read from its ref
+    const productComposable = useLocationProducts()
+    await productComposable.fetchProducts(locationId)
+    products.value = productComposable.products.value
+  } catch {
+    products.value = []
+  } finally {
+    productsLoading.value = false
+  }
+}
+
+async function loadMovements(locationId: number) {
+  movementsLoading.value = true
+  try {
+    const movementComposable = useMovements()
+    await movementComposable.fetchByLocation(locationId)
+    movements.value = movementComposable.movements.value.slice(0, 10)
+  } catch {
+    movements.value = []
+  } finally {
+    movementsLoading.value = false
+  }
+}
+
+async function loadLabel() {
+  if (!location.value) return
+  labelLoading.value = true
+  try {
+    const data = await fetchLocationLabel(location.value.id)
+    labelData.value = data
+  } catch {
+    // Error handled by composable
+  } finally {
+    labelLoading.value = false
+  }
+}
+
+function handleBreadcrumbNavigate(segment: { id: number; full_code: string }) {
+  const loc = locationStore.findInTree(segment.id)
+  if (loc) {
+    emit('navigate', loc)
+  }
+}
+
+function handleChildClick(child: any) {
+  const loc = child as Location
+  emit('navigate', loc)
+}
+
+async function handlePrintLabel() {
+  if (!location.value) return
+  try {
+    await printLocationLabel(location.value.id)
+  } catch {
+    // Error handled by composable
+  }
+}
+
+function handleDelete() {
+  showDeleteConfirm.value = true
+}
+
+async function confirmDelete() {
+  if (!location.value) return
+  deleting.value = true
+  try {
+    await remove(location.value.id)
+    showDeleteConfirm.value = false
+    emit('deleted')
+  } catch {
+    // Error handled by composable
+  } finally {
+    deleting.value = false
+  }
+}
+
+function handleLocationSaved(updated: Location) {
+  location.value = updated
+  showEditForm.value = false
+}
+
+async function handleChildCreated(_newChild: Location) {
+  showCreateChildForm.value = false
+  if (location.value) {
+    await loadChildren(location.value.id)
+  }
+}
+
+// Watch for prop changes to reload
+watch(
+  () => [props.locationId, props.locationCode],
+  () => {
+    labelData.value = null
+    loadLocation()
+  },
+)
+
+onMounted(() => {
+  loadLocation()
+})
+</script>
+
+<style scoped>
+.location-detail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 1rem);
+  padding: var(--space-4, 1rem);
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+/* Header */
+.location-detail__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3, 0.75rem);
+}
+
+.location-detail__title-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4, 1rem);
+  flex-wrap: wrap;
+}
+
+.location-detail__title-area {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.location-detail__name {
+  margin: 0;
+  font-size: var(--text-xl, 1.25rem);
+  font-weight: 700;
+  color: var(--admin-text-primary);
+  line-height: 1.3;
+}
+
+.location-detail__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  flex-shrink: 0;
+}
+
+/* Info grid */
+.location-detail__info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: var(--space-4, 1rem);
+}
+
+.location-detail__info-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1, 0.25rem);
+}
+
+.location-detail__info-label {
+  font-size: var(--text-xs, 0.75rem);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--admin-text-tertiary);
+}
+
+.location-detail__info-value {
+  margin: 0;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-primary);
+  line-height: 1.5;
+}
+
+/* Children */
+.location-detail__child-cell {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+}
+
+.location-detail__count {
+  color: var(--admin-text-tertiary);
+}
+
+/* Products */
+.location-detail__product-count-label {
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-tertiary);
+}
+
+.location-detail__product-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.location-detail__product-name {
+  font-weight: 500;
+  color: var(--admin-text-primary);
+}
+
+.location-detail__product-sku {
+  font-size: var(--text-xs, 0.75rem);
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  color: var(--admin-text-tertiary);
+}
+
+/* Movements */
+.location-detail__movements-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.location-detail__movement {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3, 0.75rem);
+  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+  border-bottom: 1px solid var(--admin-border);
+}
+
+.location-detail__movement:last-child {
+  border-bottom: none;
+}
+
+.location-detail__movement-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: var(--admin-content-bg);
+  color: var(--admin-text-secondary);
+}
+
+.location-detail__movement-icon--placed,
+.location-detail__movement-icon--received {
+  background: color-mix(in srgb, var(--color-success, #059669) 12%, transparent);
+  color: var(--color-success, #059669);
+}
+
+.location-detail__movement-icon--picked {
+  background: color-mix(in srgb, var(--color-warning, #d97706) 12%, transparent);
+  color: var(--color-warning, #d97706);
+}
+
+.location-detail__movement-icon--moved {
+  background: color-mix(in srgb, var(--color-info, #0891b2) 12%, transparent);
+  color: var(--color-info, #0891b2);
+}
+
+.location-detail__movement-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.location-detail__movement-primary {
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-primary);
+  line-height: 1.4;
+}
+
+.location-detail__movement-qty {
+  color: var(--admin-text-tertiary);
+}
+
+.location-detail__movement-meta {
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-tertiary);
+}
+
+/* Label preview */
+.location-detail__label-preview {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4, 1rem);
+  padding: var(--space-2, 0.5rem);
+}
+
+.location-detail__label-qr {
+  flex-shrink: 0;
+  width: 80px;
+  height: 80px;
+  color: var(--admin-text-primary);
+}
+
+.location-detail__label-qr :deep(svg) {
+  width: 100%;
+  height: 100%;
+}
+
+.location-detail__label-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1, 0.25rem);
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-primary);
+}
+
+.location-detail__label-code {
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  color: var(--admin-text-secondary);
+}
+
+.location-detail__label-path {
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--admin-text-tertiary);
+}
+
+/* Delete */
+.location-detail__delete-warning {
+  margin: 0;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-primary);
+  line-height: 1.5;
+}
+
+/* Loading / Empty inline states */
+.location-detail__loading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 1rem);
+  padding: var(--space-4, 1rem);
+}
+
+.location-detail__loading-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3, 0.75rem);
+}
+
+.location-detail__loading-inline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2, 0.5rem);
+  padding: var(--space-4, 1rem);
+}
+
+.location-detail__empty-inline {
+  text-align: center;
+  padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
+  color: var(--admin-text-tertiary);
+  font-size: var(--text-sm, 0.875rem);
+}
+
+.location-detail__empty-inline p {
+  margin: 0;
+}
+
+.location-detail__skeleton {
+  border-radius: 4px;
+  background: linear-gradient(
+    90deg,
+    var(--admin-border) 25%,
+    var(--admin-content-bg) 50%,
+    var(--admin-border) 75%
+  );
+  background-size: 200% 100%;
+  animation: detail-shimmer 1.5s ease-in-out infinite;
+}
+
+.location-detail__skeleton--breadcrumb {
+  width: 200px;
+  height: 14px;
+}
+
+.location-detail__skeleton--title {
+  width: 300px;
+  height: 24px;
+}
+
+.location-detail__skeleton--badges {
+  width: 180px;
+  height: 18px;
+}
+
+.location-detail__skeleton--card {
+  height: 120px;
+  border-radius: 8px;
+}
+
+.location-detail__skeleton--row {
+  height: 40px;
+}
+
+@keyframes detail-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 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>