"Refactor database connections and styling in frontend templates"

backend/app/tailwind.config.js

@@ -14,16 +14,43 @@ module.exports = {
         '96': '24rem'
       },
       colors: {
-        // Mercedes-Benz Corporate Colors
+        // Mercedes-Benz Corporate Colors - Deep Black Theme
         'mercedes': {
-          'black': '#000000',
+          'black': '#000000',        // Tiefschwarz für Dark Mode
+          'dark-gray': '#0a0a0a',    // Sehr dunkles Grau
           'silver': '#C0C0C0',
-          'dark-gray': '#1a1a1a',
           'light-gray': '#f5f5f5',
           'platinum': '#E5E4E2',
-          'charcoal': '#36454F',
+          'charcoal': '#1a1a1a',     // Dunkle Akzentfarbe
           'steel': '#71797E'
         },
+        // Deep Black Dark Mode Farben
+        'deep-black': {
+          'primary': '#000000',      // Haupthintergrund
+          'secondary': '#0a0a0a',    // Sekundärer Hintergrund
+          'surface': '#1a1a1a',      // Kartenoberflächen
+          'border': '#333333',       // Rahmenfarben
+          'text': '#ffffff',         // Primärer Text
+          'text-muted': '#a0a0a0'    // Gedämpfter Text
+        },
+        // Professional Grid Colors
+        'grid': {
+          'gap-sm': '1rem',
+          'gap-md': '1.5rem', 
+          'gap-lg': '2rem',
+          'gap-xl': '2.5rem'
+        },
+        // Status Farben - Optimiert für Dark Mode
+        'status': {
+          'online': '#10b981',
+          'offline': '#ef4444',
+          'warning': '#f59e0b',
+          'info': '#3b82f6',
+          'success': '#059669',
+          'error': '#dc2626',
+          'pending': '#8b5cf6',
+          'processing': '#06b6d4'
+        },
         // Dark Mode optimierte Farben - Verbessert
         'dark': {
           'bg': '#0f172a',        // Dunkler Hintergrund
@@ -60,18 +87,6 @@ module.exports = {
           'focus': '#e2e8f0',
           'accent': '#3b82f6'
         },
-        // Status Farben - Erweitert
-        'status': {
-          'online': '#10b981',
-          'offline': '#ef4444',
-          'warning': '#f59e0b',
-          'info': '#3b82f6',
-          'success': '#059669',
-          'error': '#dc2626',
-          'pending': '#8b5cf6',
-          'processing': '#06b6d4',
-          'unknown': '#6b7280'
-        },
         // Printer Status Farben - Erweitert
         'printer': {
           'ready': '#10b981',
@@ -111,6 +126,49 @@ module.exports = {
           'to-red': '#ef4444'
         }
       },
+      // Grid Layout Definitionen
+      gridTemplateColumns: {
+        'stats-mobile': '1fr',
+        'stats-tablet': 'repeat(2, 1fr)',
+        'stats-desktop': 'repeat(4, 1fr)',
+        'cards-mobile': '1fr',
+        'cards-tablet': 'repeat(2, 1fr)',
+        'cards-desktop': 'repeat(3, 1fr)',
+        'wide-desktop': 'repeat(4, 1fr)'
+      },
+      // Spacing für konsistente Abstände
+      gap: {
+        'card-sm': '1rem',
+        'card-md': '1.5rem',
+        'card-lg': '2rem',
+        'section': '2.5rem'
+      },
+      // Professional Shadows für Glasmorphismus
+      boxShadow: {
+        'mercedes-glass': '0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1)',
+        'mercedes-hover': '0 12px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.15)',
+        'card-dark': '0 25px 50px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05)',
+        'deep-black': '0 20px 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1)'
+      },
+      // Backdrop Blur Values
+      backdropBlur: {
+        'mercedes': '20px',
+        'strong': '25px'
+      },
+      // Typography für Mercedes-Design
+      fontFamily: {
+        'mercedes': ['Inter', 'system-ui', 'sans-serif']
+      },
+      // Animation Timings
+      transitionDuration: {
+        '400': '400ms',
+        '600': '600ms'
+      },
+      // Border Radius für konsistente Rundungen
+      borderRadius: {
+        'mercedes': '1.5rem',
+        'card': '1.25rem'
+      },
       typography: {
         DEFAULT: {
           css: {
@@ -123,11 +181,12 @@ module.exports = {
           },
         },
       },
-      boxShadow: {
-        'mercedes': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-        'card-dark': '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2)',
-      }
     },
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/forms')({
+      strategy: 'class'
+    }),
+    require('@tailwindcss/typography')
+  ],
 }