fix: restore visual color indicators in material management

src/pages/Admin.vue

@@ -311,9 +311,11 @@
                     <Button type="button" variant="hero" @click="addColor">{{ t('admin.actions.add') }}</Button>
                   </div>
                   <div class="flex flex-wrap gap-2 mt-3">
-                    <span v-for="(c, idx) in matForm.available_colors" :key="idx" class="px-2 py-1 bg-primary/10 text-primary rounded-lg text-xs font-bold border border-primary/20 flex items-center gap-2">
-                      {{ c }} <X class="w-3 h-3 cursor-pointer hover:text-rose-500" @click="removeColor(idx)" />
-                    </span>
+                    <div v-for="(c, idx) in matForm.available_colors" :key="idx" class="flex items-center gap-2 bg-background/50 border border-border/50 px-3 py-1.5 rounded-xl text-xs group transition-all hover:border-primary/30">
+                      <div class="w-3 h-3 rounded-full border border-white/10 shadow-sm" :style="{ backgroundColor: c.toLowerCase() }"></div>
+                      <span class="font-medium">{{ c }}</span>
+                      <button type="button" @click="removeColor(idx)" class="text-muted-foreground hover:text-rose-500 transition-colors ml-1 opacity-0 group-hover:opacity-100"><X class="w-3 h-3" /></button>
+                    </div>
                   </div>
                 </div>