/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './templates/**/*.html',
    './static/js/**/*.js',
    './static/**/*.html',
    // Berücksichtige alle Python-Templates mit Tailwind-Klassen
    './blueprints/**/*.py',
    './models.py',
    './app.py'
  ],
  theme: {
    extend: {
      // Mercedes-Benz Corporate Design System
      colors: {
        'mercedes-black': '#000000',
        'mercedes-blue': '#0073ce',
        'mercedes-silver': '#aaa9ad',
        'mercedes-gray': '#5e5e5e',
        'mercedes-dark': '#1a1a1a',
        'mercedes-light': '#f8f9fa',
        // Zusätzliche Systemfarben
        'success': '#10b981',
        'warning': '#f59e0b', 
        'error': '#ef4444',
        'info': '#3b82f6'
      },
      fontFamily: {
        'mercedes': ['Mercedes-Benz Text', 'Arial', 'sans-serif'],
        'sans': ['Mercedes-Benz Text', 'system-ui', 'sans-serif']
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
        '128': '32rem'
      },
      borderRadius: {
        'mercedes': '8px',
        'xl': '12px',
        '2xl': '16px',
        '3xl': '24px'
      },
      boxShadow: {
        'mercedes': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
        'mercedes-lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
        'glass': '0 8px 32px 0 rgba(31, 38, 135, 0.37)',
        'glass-inset': 'inset 0 1px 0 0 rgba(255, 255, 255, 0.05)'
      },
      backdropBlur: {
        'xs': '2px',
        'glass': '16px'
      },
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in-out',
        'slide-up': 'slideUp 0.3s ease-out',
        'slide-down': 'slideDown 0.3s ease-out',
        'pulse-slow': 'pulse 3s infinite',
        'bounce-slow': 'bounce 2s infinite',
        'spin-slow': 'spin 3s linear infinite',
        'ping-slow': 'ping 3s cubic-bezier(0, 0, 0.2, 1) infinite'
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' }
        },
        slideUp: {
          '0%': { transform: 'translateY(100%)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' }
        },
        slideDown: {
          '0%': { transform: 'translateY(-100%)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' }
        }
      },
      screens: {
        'xs': '475px',
        '3xl': '1920px',
        '4xl': '2560px'
      }
    }
  },
  plugins: [
    require('@tailwindcss/forms')({
      strategy: 'class' // Nur bei .form-input, .form-select, etc.
    }),
    // Custom Plugin für Mercedes-Benz Utilities
    function({ addUtilities, addComponents, theme }) {
      const newUtilities = {
        '.glassmorphism': {
          background: 'rgba(255, 255, 255, 0.05)',
          borderRadius: '16px',
          boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.37)',
          backdropFilter: 'blur(8px)',
          WebkitBackdropFilter: 'blur(8px)',
          border: '1px solid rgba(255, 255, 255, 0.18)'
        },
        '.glassmorphism-dark': {
          background: 'rgba(0, 0, 0, 0.05)',
          borderRadius: '16px', 
          boxShadow: '0 8px 32px 0 rgba(0, 0, 0, 0.37)',
          backdropFilter: 'blur(8px)',
          WebkitBackdropFilter: 'blur(8px)',
          border: '1px solid rgba(0, 0, 0, 0.18)'
        },
        '.text-shadow': {
          textShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
        },
        '.text-shadow-lg': {
          textShadow: '0 4px 8px rgba(0, 0, 0, 0.2)'
        }
      }

      const newComponents = {
        '.btn-mercedes': {
          padding: '0.75rem 1.5rem',
          borderRadius: '8px',
          fontWeight: '600',
          fontSize: '0.875rem',
          textTransform: 'uppercase',
          letterSpacing: '0.05em',
          transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
          background: 'linear-gradient(135deg, #0073ce 0%, #005ba3 100%)',
          color: 'white',
          border: 'none',
          cursor: 'pointer',
          '&:hover': {
            background: 'linear-gradient(135deg, #005ba3 0%, #003d82 100%)',
            transform: 'translateY(-2px)',
            boxShadow: '0 12px 20px -5px rgba(0, 115, 206, 0.4)'
          },
          '&:focus': {
            outline: 'none',
            boxShadow: '0 0 0 3px rgba(0, 115, 206, 0.3)'
          },
          '&:active': {
            transform: 'translateY(0)',
            boxShadow: 'inset 0 2px 4px rgba(0, 0, 0, 0.2)'
          }
        },
        '.mercedes-form-input': {
          padding: '0.75rem 1rem',
          borderRadius: '8px',
          border: '2px solid #e5e7eb',
          background: 'rgba(255, 255, 255, 0.95)',
          backdropFilter: 'blur(10px)',
          transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
          fontWeight: '500',
          '&:focus': {
            borderColor: '#0073ce',
            boxShadow: '0 0 0 4px rgba(0, 115, 206, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1)',
            transform: 'translateY(-2px)',
            background: 'rgba(255, 255, 255, 1)'
          }
        },
        '.dashboard-card': {
          background: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)',
          border: '2px solid #f1f5f9',
          borderRadius: '16px',
          transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
          position: 'relative',
          overflow: 'hidden',
          backdropFilter: 'blur(10px)',
          '&:hover': {
            transform: 'translateY(-4px) scale(1.02)',
            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.15)',
            borderColor: '#0073ce'
          }
        }
      }

      addUtilities(newUtilities)
      addComponents(newComponents)
    }
  ],
  // Für Production: Entferne ungenutzte Styles (Tailwind v3)
  safelist: [
    // Behalte wichtige Klassen auch wenn sie dynamisch generiert werden
    'text-white', 'text-black', 'text-gray-500', 'text-gray-700', 'text-gray-900',
    'text-mercedes-blue', 'text-mercedes-black', 'text-success', 'text-warning', 'text-error',
    'bg-white', 'bg-black', 'bg-gray-100', 'bg-gray-200', 'bg-gray-500', 'bg-gray-800',
    'bg-mercedes-blue', 'bg-mercedes-black', 'bg-success', 'bg-warning', 'bg-error',
    'border-gray-200', 'border-gray-300', 'border-mercedes-blue',
    'hover:bg-gray-100', 'hover:bg-mercedes-blue', 'hover:text-white',
    'focus:ring-mercedes-blue', 'focus:border-mercedes-blue',
    'active:bg-gray-200',
    'dark:bg-gray-800', 'dark:text-white', 'dark:border-gray-600',
    'glassmorphism',
    'glassmorphism-dark',
    'btn-mercedes',
    'mercedes-form-input',
    'dashboard-card'
  ],
  // Dark Mode Support
  darkMode: 'class' // Verwende .dark Klasse für Dark Mode
}