Restyle InfoPanel to match SelectionPanel (dark glass styling)

app/components/catalog/InfoPanel.vue

@@ -1,7 +1,8 @@
 <template>
-  <MapPanel>
+  <div class="flex flex-col h-full">
-    <template #header>
+    <!-- Header -->
-      <div class="flex items-center justify-between mb-2">
+    <div class="flex-shrink-0 p-4 border-b border-white/10">
+      <div class="flex items-center justify-between mb-3">
         <div class="flex items-center gap-2">
           <div
             class="flex items-center justify-center w-6 h-6 rounded-full"
@@ -9,26 +10,25 @@
           >
             <Icon :name="entityIcon" size="14" class="text-white" />
           </div>
-          <h3 class="font-semibold text-base text-base-content">{{ entityName }}</h3>
+          <h3 class="font-semibold text-base text-white">{{ entityName }}</h3>
         </div>
-        <button
+        <button class="btn btn-ghost btn-xs btn-circle text-white/60 hover:text-white" @click="emit('close')">
-          class="btn btn-ghost btn-xs btn-circle text-base-content/60 hover:text-base-content"
-          @click="emit('close')"
-        >
           <Icon name="lucide:x" size="16" />
         </button>
       </div>
-    </template>
+    </div>
 
+    <!-- Content (scrollable) -->
+    <div class="flex-1 overflow-y-auto p-4">
       <!-- Loading state -->
       <div v-if="loading" class="flex items-center justify-center py-8">
-      <span class="loading loading-spinner loading-md" />
+        <span class="loading loading-spinner loading-md text-white" />
       </div>
 
       <!-- Content -->
       <div v-else-if="entity" class="flex flex-col gap-4">
         <!-- Entity details card -->
-      <div class="mb-2">
+        <div>
           <HubCard v-if="entityType === 'hub'" :hub="entity" />
           <SupplierCard v-else-if="entityType === 'supplier'" :supplier="entity" />
           <OfferCard v-else-if="entityType === 'offer'" :offer="entity" compact />
@@ -40,17 +40,17 @@
             v-for="tab in availableTabs"
             :key="tab.id"
             role="tab"
-          class="tab"
+            class="tab text-white/70"
-          :class="{ 'tab-active': currentTab === tab.id }"
+            :class="{ 'tab-active !text-white !bg-white/20': currentTab === tab.id }"
             @click="currentTab = tab.id"
           >
             {{ tab.label }}
-          <span v-if="tab.count" class="ml-1 opacity-70">({{ tab.count }})</span>
+            <span v-if="tab.count !== undefined" class="ml-1 opacity-70">({{ tab.count }})</span>
           </a>
         </div>
 
         <!-- Tab content -->
-      <div class="flex flex-col gap-2 min-h-[200px]">
+        <div class="flex flex-col gap-2">
           <!-- Products tab (only for Offer entity) -->
           <div v-if="currentTab === 'products' && entityType === 'offer'">
             <div v-if="relatedProducts.length === 0" class="text-center py-8 text-white/60">
@@ -162,12 +162,13 @@
         </div>
 
         <!-- Add to filter button -->
-      <button class="btn btn-primary btn-sm mt-2" @click="emit('add-to-filter')">
+        <button class="btn btn-primary btn-sm" @click="emit('add-to-filter')">
           <Icon name="lucide:filter-plus" size="16" />
           {{ $t('catalog.info.addToFilter') }}
         </button>
       </div>
-  </MapPanel>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -206,10 +207,10 @@ const currentTab = ref<string>('offers')
 
 // Entity name
 const entityName = computed(() => {
-  return props.entity?.name || props.entityId.slice(0, 8) + '...'
+  return props.entity?.name || props.entity?.productName || props.entityId.slice(0, 8) + '...'
 })
 
-// Badge color and label
+// Badge color
 const badgeColor = computed(() => {
   if (props.entityType === 'hub') return entityColors.hub
   if (props.entityType === 'supplier') return entityColors.supplier
@@ -217,13 +218,6 @@ const badgeColor = computed(() => {
   return '#666'
 })
 
-const badgeLabel = computed(() => {
-  if (props.entityType === 'hub') return t('catalog.entities.hub')
-  if (props.entityType === 'supplier') return t('catalog.entities.supplier')
-  if (props.entityType === 'offer') return t('catalog.entities.offer')
-  return ''
-})
-
 const entityIcon = computed(() => {
   if (props.entityType === 'hub') return 'lucide:warehouse'
   if (props.entityType === 'supplier') return 'lucide:factory'