fix: restore individual pencils and fix modal visibility

src/components/admin/OrderCard.vue

@@ -27,7 +27,12 @@
 
         <div class="flex items-center gap-2">
           <div class="flex flex-col">
-            <h3 class="font-bold leading-none">{{ order.first_name }} {{ order.last_name }}</h3>
+            <div class="flex items-center gap-2">
+              <h3 class="font-bold leading-none">{{ order.first_name }} {{ order.last_name }}</h3>
+              <button @click="$emit('edit-order', order)" class="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-primary/10 rounded text-primary">
+                <Edit2 class="w-3 h-3" />
+              </button>
+            </div>
             <div v-if="order.is_company" class="mt-1 flex flex-col gap-0.5">
               <span class="text-[9px] font-bold uppercase py-0.5 px-1.5 bg-primary text-primary-foreground rounded-md w-fit">{{ t("auth.fields.company") }}</span>
               <p class="text-[10px] font-bold text-primary truncate max-w-[150px]">{{ order.company_name }}</p>
@@ -46,8 +51,11 @@
             <span class="text-[9px] font-bold uppercase text-muted-foreground tracking-widest">{{ t("admin.labels.registered") }}</span>
             <p class="text-xs font-medium">{{ formatDate(order.created_at) }}</p>
           </div>
-          <div class="space-y-1">
-            <span class="text-[9px] font-bold uppercase text-muted-foreground tracking-widest">{{ t("admin.fields.address") }}</span>
+          <div class="space-y-1 relative group/edit">
+            <div class="flex items-center justify-between">
+              <span class="text-[9px] font-bold uppercase text-muted-foreground tracking-widest">{{ t("admin.fields.address") }}</span>
+              <button @click="$emit('edit-order', order)" class="opacity-0 group-hover/edit:opacity-100 p-1 text-primary"><Edit2 class="w-2.5 h-2.5" /></button>
+            </div>
             <p class="text-xs font-medium leading-relaxed">{{ order.shipping_address || '—' }}</p>
           </div>
           <div class="space-y-1">
@@ -56,10 +64,13 @@
           </div>
         </div>
 
-        <div v-if="order.notes" class="mt-8 p-4 bg-primary/5 border border-primary/10 rounded-2xl italic">
-          <span class="text-[9px] font-bold uppercase text-primary/60 mb-2 block tracking-widest">{{ t("admin.fields.projectNotes") }}</span>
-          <p class="text-[11px] leading-relaxed">"{{ order.notes }}"</p>
-        </div>
+          <div v-if="order.notes" class="mt-8 p-4 bg-primary/5 border border-primary/10 rounded-2xl italic relative group/edit">
+            <div class="flex items-center justify-between mb-2">
+              <span class="text-[9px] font-bold uppercase text-primary/60 tracking-widest">{{ t("admin.fields.projectNotes") }}</span>
+              <button @click="$emit('edit-order', order)" class="opacity-0 group-hover/edit:opacity-100 p-1 text-primary"><Edit2 class="w-2.5 h-2.5" /></button>
+            </div>
+            <p class="text-[11px] leading-relaxed">"{{ order.notes }}"</p>
+          </div>
       </div>
 
       <!-- Resources Column -->
@@ -156,9 +167,12 @@
         </div>
 
         <div class="space-y-4 mb-8">
-           <div class="flex justify-between items-baseline">
+           <div class="flex justify-between items-baseline group/edit relative">
              <span class="text-[10px] font-bold uppercase text-muted-foreground">{{ t("admin.fields.totalPrice") }}</span>
-             <p class="text-2xl font-black font-display text-primary">{{ order.invoice_amount || 0 }} EUR</p>
+             <div class="flex items-center gap-2">
+               <p class="text-2xl font-black font-display text-primary">{{ order.invoice_amount || 0 }} EUR</p>
+               <button @click="$emit('edit-order', order)" class="opacity-0 group-hover/edit:opacity-100 p-1 text-primary"><Edit2 class="w-3.5 h-3.5" /></button>
+             </div>
            </div>
            
            <div class="pt-4 border-t border-primary/10 space-y-3">
@@ -180,10 +194,6 @@
         </div>
 
         <div class="mt-auto space-y-3">
-          <button @click="$emit('edit-order', order)" class="w-full py-2 bg-red-600 text-white font-bold rounded-xl mb-2">!!! DEBUG EDIT ORDER !!!</button>
-          <Button variant="outline" class="w-full gap-2 rounded-2xl h-12 border-primary/20 text-primary hover:bg-primary/10" @click="$emit('edit-order', order)">
-            <Edit2 class="w-4 h-4" />{{ t("admin.actions.edit") }}
-          </Button>
           <Button variant="hero" class="w-full gap-2 rounded-2xl h-12" @click="$emit('open-chat', order.id)">
             <MessageCircle class="w-4 h-4" />{{ t("admin.actions.chatWithClient") }}
           </Button>

src/pages/Admin.vue

@@ -132,13 +132,9 @@
 
     <!-- Global Modals -->
     <Teleport to="body">
-       <Transition 
-         enter-active-class="transition duration-150" enter-from-class="opacity-0 scale-95" enter-to-class="opacity-100 scale-100" 
-         leave-active-class="transition duration-100" leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95"
-       >
-         <div v-if="showAddModal" class="fixed inset-0 z-[100] flex items-center justify-center p-4">
-           <div class="absolute inset-0 bg-background/80 backdrop-blur-sm" @click="closeModals" />
-           <div class="relative w-full max-w-lg bg-card border border-border/50 rounded-3xl p-8 shadow-2xl overflow-y-auto max-h-[90vh]">
+       <div v-if="showAddModal" class="fixed inset-0 z-[9999] flex items-center justify-center p-4">
+         <div class="absolute inset-0 bg-background/80 backdrop-blur-sm" @click="closeModals" />
+         <div class="relative w-full max-w-lg bg-card border border-border/50 rounded-3xl p-8 shadow-2xl overflow-y-auto max-h-[90vh]">
               <h3 class="text-xl font-bold font-display mb-6">{{ editingMaterial || editingService || editingPost || editingOrder ? t('admin.actions.edit') : t("admin.addNew") }}</h3>
               
               <!-- Order Edit Form -->
@@ -263,7 +259,6 @@
               </form>
            </div>
          </div>
-       </Transition>
     </Teleport>
 
     <Footer />
@@ -451,6 +446,7 @@ const handleUpdateFiscal = async (id: number, data: any) => {
 };
 
 const handleEditOrder = (order: any) => {
+  console.log("Editing order:", order.id);
   editingOrder.value = order;
   Object.assign(orderForm, {
     total_price: order.invoice_amount || 0,