/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./templates/**/*.html",
    "./static/**/*.js",
    "./static/css/input.css"
  ],
  darkMode: 'class',
  theme: {
    extend: {
      // Erweiterte Container-Einstellungen für bessere Responsivität
      container: {
        center: true,
        padding: {
          DEFAULT: '1rem',
          sm: '1.5rem',
          lg: '2rem',
          xl: '3rem',
          '2xl': '4rem',
        },
        screens: {
          sm: '640px',
          md: '768px',
          lg: '1024px',
          xl: '1280px',
          '2xl': '1400px',
        },
      },
      // Erweiterte Breakpoints für bessere Kontrolle
      screens: {
        'xs': '480px',      // Extra small devices
        'sm': '640px',      // Small devices
        'md': '768px',      // Medium devices
        'lg': '1024px',     // Large devices
        'xl': '1280px',     // Extra large devices
        '2xl': '1536px',    // 2X large devices
        '3xl': '1920px',    // Ultra wide screens
        // Custom breakpoints für spezielle Anwendungsfälle
        'tablet': '768px',
        'laptop': '1024px',
        'desktop': '1280px',
        'wide': '1536px',
        // Orientierungs-spezifische Breakpoints
        'landscape': {'raw': '(orientation: landscape)'},
        'portrait': {'raw': '(orientation: portrait)'},
        // Touch device detection
        'touch': {'raw': '(hover: none) and (pointer: coarse)'},
        'no-touch': {'raw': '(hover: hover) and (pointer: fine)'},
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
        '128': '32rem',
        '144': '36rem',
        '160': '40rem',
        // Responsive spacing utilities
        'safe-top': 'env(safe-area-inset-top)',
        'safe-bottom': 'env(safe-area-inset-bottom)',
        'safe-left': 'env(safe-area-inset-left)',
        'safe-right': 'env(safe-area-inset-right)',
      },
      fontSize: {
        // Responsive font sizes
        'xs': ['0.75rem', { lineHeight: '1rem' }],
        'sm': ['0.875rem', { lineHeight: '1.25rem' }],
        'base': ['1rem', { lineHeight: '1.5rem' }],
        'lg': ['1.125rem', { lineHeight: '1.75rem' }],
        'xl': ['1.25rem', { lineHeight: '1.75rem' }],
        '2xl': ['1.5rem', { lineHeight: '2rem' }],
        '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
        '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
        '5xl': ['3rem', { lineHeight: '1' }],
        '6xl': ['3.75rem', { lineHeight: '1' }],
        '7xl': ['4.5rem', { lineHeight: '1' }],
        '8xl': ['6rem', { lineHeight: '1' }],
        '9xl': ['8rem', { lineHeight: '1' }],
        // Mobile-optimized sizes
        'mobile-xs': ['0.675rem', { lineHeight: '0.875rem' }],
        'mobile-sm': ['0.8rem', { lineHeight: '1.1rem' }],
        'mobile-base': ['0.925rem', { lineHeight: '1.4rem' }],
        'mobile-lg': ['1.05rem', { lineHeight: '1.6rem' }],
      },
      colors: {
        // Mercedes-Benz Corporate Colors
        'mercedes': {
          'black': '#000000',
          'silver': '#C0C0C0',
          'dark-gray': '#1a1a1a',
          'light-gray': '#f5f5f5',
          'platinum': '#E5E4E2',
          'charcoal': '#36454F',
          'steel': '#71797E'
        },
        // Dark Mode optimierte Farben - Verbessert
        'dark': {
          'bg': '#0f172a',        // Dunkler Hintergrund
          'bg-secondary': '#131c2e', // Sekundärer Hintergrund noch dunkler
          'surface': '#1e293b',
          'surface-hover': '#334155',
          'card': '#1e293b',      // Dunklere Kartenfarbe für besseren Kontrast
          'card-hover': '#334155', // Dunklerer Hover-Zustand
          'text': '#f8fafc',
          'text-secondary': '#e2e8f0',
          'text-muted': '#94a3b8',
          'text-disabled': '#64748b',
          'border': '#334155',
          'border-light': '#475569',
          'hover': '#334155',     // Dunklerer Hover-Zustand
          'focus': '#475569',
          'accent': '#4f46e5'
        },
        // Light Mode optimierte Farben - Verbessert
        'light': {
          'bg': '#ffffff',
          'bg-secondary': '#f8fafc',
          'surface': '#f7fafc',
          'surface-hover': '#edf2f7',
          'card': '#ffffff',
          'card-hover': '#f7fafc',
          'text': '#1a202c',
          'text-secondary': '#2d3748',
          'text-muted': '#4a5568',
          'text-disabled': '#a0aec0',
          'border': '#e2e8f0',
          'border-light': '#edf2f7',
          'hover': '#f1f5f9',
          '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',
          'busy': '#f59e0b',
          'error': '#ef4444',
          'offline': '#6b7280',
          'maintenance': '#8b5cf6',
          'initializing': '#06b6d4'
        },
        // Job Status Farben - Erweitert
        'job': {
          'queued': '#6b7280',
          'printing': '#3b82f6',
          'completed': '#10b981',
          'failed': '#ef4444',
          'cancelled': '#f59e0b',
          'paused': '#8b5cf6',
          'retrying': '#f97316'
        },
        // Accent Farben - Erweitert
        'accent': {
          'primary': '#3b82f6',
          'secondary': '#8b5cf6',
          'tertiary': '#06b6d4',
          'quaternary': '#10b981',
          'quinary': '#f97316'
        },
        // Gradient Farben - Erweitert
        'gradient': {
          'from-blue': '#3b82f6',
          'to-purple': '#8b5cf6',
          'from-green': '#10b981',
          'to-blue': '#3b82f6',
          'from-purple': '#8b5cf6',
          'to-pink': '#ec4899',
          'from-orange': '#f97316',
          'to-red': '#ef4444'
        }
      },
      typography: {
        DEFAULT: {
          css: {
            'code::before': {
              content: 'none',
            },
            'code::after': {
              content: 'none',
            },
          },
        },
      },
      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)',
        // Responsive shadows
        'mobile': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
        'tablet': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
        'desktop': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
      },
      // Responsive border radius
      borderRadius: {
        'none': '0',
        'sm': '0.125rem',
        DEFAULT: '0.25rem',
        'md': '0.375rem',
        'lg': '0.5rem',
        'xl': '0.75rem',
        '2xl': '1rem',
        '3xl': '1.5rem',
        'full': '9999px',
        // Mobile-optimized radius
        'mobile': '0.375rem',
        'tablet': '0.5rem',
        'desktop': '0.75rem',
      },
      // Animation improvements
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in-out',
        'slide-up': 'slideUp 0.5s ease-out',
        'slide-down': 'slideDown 0.5s ease-out',
        'slide-left': 'slideLeft 0.5s ease-out',
        'slide-right': 'slideRight 0.5s ease-out',
        'scale-in': 'scaleIn 0.3s ease-out',
        'bounce-soft': 'bounceSoft 0.6s ease-out',
        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 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' },
        },
        slideLeft: {
          '0%': { transform: 'translateX(100%)', opacity: '0' },
          '100%': { transform: 'translateX(0)', opacity: '1' },
        },
        slideRight: {
          '0%': { transform: 'translateX(-100%)', opacity: '0' },
          '100%': { transform: 'translateX(0)', opacity: '1' },
        },
        scaleIn: {
          '0%': { transform: 'scale(0.9)', opacity: '0' },
          '100%': { transform: 'scale(1)', opacity: '1' },
        },
        bounceSoft: {
          '0%, 20%, 53%, 80%, 100%': { transform: 'translate3d(0,0,0)' },
          '40%, 43%': { transform: 'translate3d(0,-15px,0)' },
          '70%': { transform: 'translate3d(0,-7px,0)' },
          '90%': { transform: 'translate3d(0,-2px,0)' },
        },
      },
      // Responsive grid templates
      gridTemplateColumns: {
        'auto-fit-240': 'repeat(auto-fit, minmax(240px, 1fr))',
        'auto-fit-280': 'repeat(auto-fit, minmax(280px, 1fr))',
        'auto-fit-320': 'repeat(auto-fit, minmax(320px, 1fr))',
        'auto-fill-240': 'repeat(auto-fill, minmax(240px, 1fr))',
        'auto-fill-280': 'repeat(auto-fill, minmax(280px, 1fr))',
        'auto-fill-320': 'repeat(auto-fill, minmax(320px, 1fr))',
      },
    },
  },
  plugins: [
    // Plugin für erweiterte responsive Utilities
    function({ addUtilities, theme }) {
      const newUtilities = {
        // Safe area utilities für mobile Geräte
        '.pt-safe': {
          'padding-top': 'env(safe-area-inset-top)',
        },
        '.pb-safe': {
          'padding-bottom': 'env(safe-area-inset-bottom)',
        },
        '.pl-safe': {
          'padding-left': 'env(safe-area-inset-left)',
        },
        '.pr-safe': {
          'padding-right': 'env(safe-area-inset-right)',
        },
        '.p-safe': {
          'padding-top': 'env(safe-area-inset-top)',
          'padding-bottom': 'env(safe-area-inset-bottom)',
          'padding-left': 'env(safe-area-inset-left)',
          'padding-right': 'env(safe-area-inset-right)',
        },
        // Responsive text utilities
        '.text-responsive': {
          'font-size': 'clamp(0.875rem, 2.5vw, 1.125rem)',
          'line-height': '1.5',
        },
        '.text-responsive-lg': {
          'font-size': 'clamp(1.125rem, 3vw, 1.5rem)',
          'line-height': '1.4',
        },
        '.text-responsive-xl': {
          'font-size': 'clamp(1.5rem, 4vw, 2.25rem)',
          'line-height': '1.3',
        },
        // Container query utilities
        '.container-responsive': {
          'container-type': 'inline-size',
        },
        // Touch-friendly targets
        '.touch-target': {
          'min-height': '44px',
          'min-width': '44px',
        },
        '.touch-target-lg': {
          'min-height': '48px',
          'min-width': '48px',
        },
      }
      addUtilities(newUtilities, ['responsive'])
    }
  ],
}