merge: resolve wizard conflicts with layout updates and clean fixes

shop/components/wizard/summary-sidebar.tsx

@@ -81,19 +81,33 @@ export function SummarySidebar({
   prevStep,
 }: SummarySidebarProps) {
   const [isOpen, setIsOpen] = React.useState(false)
+  const [selectedBasketIdx, setSelectedBasketIdx] = React.useState<number | null>(null)
+
+  // When editing a basket item via pencil, open the modal for that item
+  const handleEditBasketItem = (idx: number) => {
+    editBasketItem(idx)
+    setIsOpen(true)
+  }
 
   const fmt = (val: number) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(val)
 
   return (
     <div className="h-full flex flex-col">
-      <Card className="bg-[oklch(0.145_0.01_148)]/90 backdrop-blur-md border border-slate-800 shadow-[0_0_30px_rgba(0,0,0,0.5)] rounded-2xl overflow-hidden flex flex-col h-full">
-        <CardHeader className="shrink-0 pb-3">
-          <CardTitle className="text-white text-lg">Zusammenfassung</CardTitle>
+      <Card className="bg-slate-900/80 backdrop-blur-xl border border-white/10 shadow-2xl rounded-2xl overflow-hidden flex flex-col h-full">
+        <CardHeader className="shrink-0 pb-3 border-b border-white/5">
+          <CardTitle className="text-white text-base font-bold flex items-center justify-between">
+            <span>Zusammenfassung</span>
+            {basketItems.length > 0 && (
+              <span className="text-xs bg-sky-500/20 text-sky-300 border border-sky-500/30 px-2 py-0.5 rounded-full font-semibold">
+                {basketItems.length} {basketItems.length === 1 ? 'Kasse' : 'Kassen'}
+              </span>
+            )}
+          </CardTitle>
         </CardHeader>
-        <CardContent className="p-5 pt-0 flex-1 flex flex-col overflow-hidden gap-3">
+        <CardContent className="p-4 pt-3 flex-1 flex flex-col overflow-hidden gap-3">
           
           {/* Active Selections & Price - scrollable */}
-          <div className="space-y-3 flex-1 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
+          <div className="space-y-3 flex-1 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
             {visibleCategories.map(cat => {
               const sel = selections[cat.id]
               const selectedProds: Product[] = []
@@ -158,9 +172,9 @@ export function SummarySidebar({
             {/* Pricing block */}
             <Separator className="bg-white/10" />
             {oneTimeTotal > 0 && monthlyTotal > 0 ? (
-              <div className="space-y-3">
+              <div className="space-y-3 bg-slate-900/90 border border-white/10 rounded-xl p-3 shadow-inner">
                 <div className="space-y-1">
-                  <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Einmalig:</p>
+                  <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Einmalig:</p>
                   <div className="flex justify-between text-xs text-slate-400">
                     <span>Netto:</span>
                     <span className="tabular-nums">{fmt(oneTimeNet)}</span>
@@ -169,13 +183,13 @@ export function SummarySidebar({
                     <span>zzgl. 19% MwSt.:</span>
                     <span className="tabular-nums">{fmt(oneTimeTax)}</span>
                   </div>
-                  <div className="flex justify-between text-sm font-bold text-white">
-                    <span>Gesamt (brutto):</span>
-                    <span className="tabular-nums">{fmt(oneTimeGross)}</span>
+                  <div className="flex justify-between text-sm font-extrabold text-white pt-1">
+                    <span>Brutto:</span>
+                    <span className="tabular-nums text-sky-400">{fmt(oneTimeGross)}</span>
                   </div>
                 </div>
                 <div className="space-y-1 pt-2 border-t border-white/10">
-                  <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Monatlich:</p>
+                  <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Monatlich:</p>
                   <div className="flex justify-between text-xs text-slate-400">
                     <span>Netto:</span>
                     <span className="tabular-nums">{fmt(monthlyNet)} / mtl.</span>
@@ -184,39 +198,39 @@ export function SummarySidebar({
                     <span>zzgl. 19% MwSt.:</span>
                     <span className="tabular-nums">{fmt(monthlyTax)} / mtl.</span>
                   </div>
-                  <div className="flex justify-between text-sm font-bold text-white">
-                    <span>Gesamt (brutto):</span>
-                    <span className="tabular-nums">{fmt(monthlyGross)} / mtl.</span>
+                  <div className="flex justify-between text-sm font-extrabold text-white pt-1">
+                    <span>Brutto:</span>
+                    <span className="tabular-nums text-sky-400">{fmt(monthlyGross)} / mtl.</span>
                   </div>
                 </div>
               </div>
             ) : oneTimeTotal > 0 ? (
-              <div className="space-y-1">
+              <div className="space-y-1 bg-slate-900/90 border border-white/10 rounded-xl p-3 shadow-inner">
                 <div className="flex justify-between text-xs text-slate-400">
-                  <span>Netto-Gesamtbetrag:</span>
+                  <span>Netto:</span>
                   <span className="tabular-nums">{fmt(oneTimeNet)}</span>
                 </div>
                 <div className="flex justify-between text-xs text-slate-400">
                   <span>zzgl. 19% MwSt.:</span>
                   <span className="tabular-nums">{fmt(oneTimeTax)}</span>
                 </div>
-                <div className="flex justify-between text-base font-bold text-primary">
-                  <span>Gesamtbetrag (brutto):</span>
+                <div className="flex justify-between text-base font-extrabold text-sky-400 pt-1">
+                  <span>Gesamt (brutto):</span>
                   <span className="tabular-nums">{fmt(oneTimeGross)}</span>
                 </div>
               </div>
             ) : (
-              <div className="space-y-1">
+              <div className="space-y-1 bg-slate-900/90 border border-white/10 rounded-xl p-3 shadow-inner">
                 <div className="flex justify-between text-xs text-slate-400">
-                  <span>Netto-Gesamtbetrag:</span>
+                  <span>Netto:</span>
                   <span className="tabular-nums">{fmt(monthlyNet)} / mtl.</span>
                 </div>
                 <div className="flex justify-between text-xs text-slate-400">
                   <span>zzgl. 19% MwSt.:</span>
                   <span className="tabular-nums">{fmt(monthlyTax)} / mtl.</span>
                 </div>
-                <div className="flex justify-between text-base font-bold text-primary">
-                  <span>Gesamtbetrag (brutto):</span>
+                <div className="flex justify-between text-base font-extrabold text-sky-400 pt-1">
+                  <span>Gesamt (brutto):</span>
                   <span className="tabular-nums">{fmt(monthlyGross)} / mtl.</span>
                 </div>
               </div>
@@ -231,56 +245,69 @@ export function SummarySidebar({
               </div>
             )}
             {!allCategoriesFilled && (
-              <p className="text-xs text-destructive flex items-center gap-1">
-                <AlertCircle className="w-3 h-3" />
+              <p className="text-xs text-amber-400 flex items-center gap-1 bg-amber-500/10 p-2 rounded-lg border border-amber-500/20">
+                <AlertCircle className="w-3.5 h-3.5 shrink-0 text-amber-400" />
                 Bitte aus jeder Pflichtkategorie einen Artikel wählen.
               </p>
             )}
             {productValidationErrors.map((err, errIdx) => (
-              <p key={errIdx} className="text-xs text-destructive flex items-center gap-1">
-                <AlertCircle className="w-3 h-3 text-destructive" />
+              <p key={errIdx} className="text-xs text-red-400 flex items-center gap-1 bg-red-500/10 p-2 rounded-lg border border-red-500/20">
+                <AlertCircle className="w-3.5 h-3.5 shrink-0 text-red-400" />
                 {err}
               </p>
             ))}
           </div>
 
-          {/* Warenkorb List (Scrollable) */}
+          {/* Kassen-Liste unten (selectable) */}
           {basketItems.length > 0 && (
-            <div className="flex-1 flex flex-col min-h-0 pt-3 border-t border-white/10 space-y-2 overflow-hidden">
-              <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider shrink-0">Warenkorb ({basketItems.length}):</p>
-              <div className="flex-1 overflow-y-auto pr-1 space-y-1.5 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
+            <div className="shrink-0 pt-3 pb-2 border-t border-white/10 space-y-2">
+              <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Kassen ({basketItems.length}):</p>
+              <div className="flex flex-col gap-2 max-h-32 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
                 {basketItems.map((item, idx) => (
-                  <div key={idx} className={`flex justify-between items-center text-xs bg-white/5 p-2 rounded border transition-all duration-300 ${idx === editingIdx ? 'border-primary/50 shadow-[0_0_10px_rgba(var(--oklch-primary),0.3)]' : 'border-white/10'}`}>
-                    <div className="flex flex-col">
-                      <span className="text-white font-medium">{item.deviceName}</span>
-                      <span className="text-[10px] text-slate-400 capitalize">
-                        {item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
-                        {item.licenseNumber ? ` · Lizenz: ${item.licenseNumber}` : ''}
-                      </span>
+                  <div
+                    key={idx}
+                    className={`flex items-center justify-between p-2.5 rounded-xl border transition-all duration-200 text-left bg-slate-900/60 ${
+                      selectedBasketIdx === idx
+                        ? 'border-sky-500/50 bg-sky-500/10 text-white shadow-[0_0_12px_rgba(56,189,248,0.15)]'
+                        : idx === editingIdx
+                        ? 'border-blue-500/40 bg-blue-500/10 text-white'
+                        : 'border-white/10 text-slate-300 hover:border-white/20 hover:bg-slate-900'
+                    }`}
+                  >
+                    <div className="flex-1 min-w-0 pr-2">
+                      <div className="flex items-center gap-1.5">
+                        <span className="font-bold text-xs text-white truncate">{item.deviceName}</span>
+                        <span className="text-[9px] px-1.5 py-0.2 rounded border border-white/10 text-slate-400 bg-white/5 uppercase">
+                          {item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
+                        </span>
+                      </div>
+                      {item.licenseNumber && (
+                        <p className="text-[10px] text-slate-400 truncate mt-0.5">{item.licenseNumber}</p>
+                      )}
                     </div>
-                    <div className="flex items-center gap-1.5">
+                    <div className="flex items-center gap-1 shrink-0">
                       <Button
                         type="button"
                         variant="ghost"
                         size="icon"
-                        className="w-7 h-7 hover:bg-white/10 text-slate-400 hover:text-white"
-                        onClick={() => {
-                          editBasketItem(idx)
-                          setIsOpen(true)
-                        }}
-                        title="Kasse bearbeiten"
+                        className="w-6 h-6 hover:bg-primary/20 text-slate-400 hover:text-primary rounded-lg transition-colors"
+                        onClick={() => handleEditBasketItem(idx)}
+                        title="Bearbeiten"
                       >
-                        <Pencil className="w-3.5 h-3.5" />
+                        <Pencil className="w-3 h-3" />
                       </Button>
                       <Button
                         type="button"
                         variant="ghost"
                         size="icon"
-                        className="w-7 h-7 hover:bg-white/10 text-destructive hover:text-red-400"
-                        onClick={() => deleteBasketItem(idx)}
-                        title="Kasse löschen"
+                        className="w-6 h-6 hover:bg-red-500/20 text-slate-400 hover:text-red-400 rounded-lg transition-colors"
+                        onClick={() => {
+                          deleteBasketItem(idx)
+                          if (selectedBasketIdx === idx) setSelectedBasketIdx(null)
+                        }}
+                        title="Löschen"
                       >
-                        <Trash2 className="w-3.5 h-3.5" />
+                        <Trash2 className="w-3 h-3" />
                       </Button>
                     </div>
                   </div>
@@ -289,25 +316,24 @@ export function SummarySidebar({
             </div>
           )}
         </CardContent>
-        <CardFooter className="flex flex-col gap-3 shrink-0">
+        <CardFooter className="flex flex-col gap-2 shrink-0 p-4 pt-2 border-t border-white/10 bg-slate-950/80">
           <Button
             type="button"
             variant="outline"
-            className="w-full border-primary/30 text-white hover:bg-primary/10 gap-2 h-10 text-sm"
+            className="w-full border-dashed border-primary/50 text-primary hover:bg-primary/10 transition-all rounded-xl h-9 text-xs font-bold gap-1.5 shadow-sm"
             onClick={() => setIsOpen(true)}
-            disabled={isNextStepDisabled}
+            disabled={!hasActiveSelection && isNextStepDisabled}
           >
-            <UserPlus className="w-4 h-4" /> {editingIdx !== null ? '💾 Kasse bearbeiten' : (hasActiveSelection ? 'Kasse speichern' : 'Kasse anlegen')}
+            <UserPlus className="w-3.5 h-3.5" /> {editingIdx !== null ? '💾 Kasse speichern' : '+ Weitere Kasse hinzufügen'}
           </Button>
-          <Separator className="bg-white/10 my-1" />
           <Button
-            className="w-full h-12 text-lg"
+            className="w-full h-10 text-sm font-bold bg-gradient-to-r from-blue-600 via-sky-500 to-cyan-400 hover:opacity-90 shadow-[0_0_20px_rgba(56,189,248,0.3)] transition-all"
             onClick={nextStep}
             disabled={basketItems.length === 0 && isNextStepDisabled}
           >
-            Weiter <ChevronRight className="ml-2 w-5 h-5" />
+            Weiter zu Schritt 4 <ChevronRight className="ml-1 w-4 h-4" />
           </Button>
-          <Button variant="ghost" className="w-full text-white" onClick={prevStep}>
+          <Button variant="ghost" className="w-full text-slate-400 hover:text-white h-7 text-xs" onClick={prevStep}>
             Zurück zum Abrechnungsmodell
           </Button>
         </CardFooter>