Projektarbeit-MYP/backend/app/static/css/input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Mercedes Deep Black Theme - Professional Grid Layouts */
@layer base {
  :root {
    /* Light Mode Farben */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8fafc;
    --color-text-primary: #0f172a;
    --color-text-secondary: #334155;
    --color-text-muted: #64748b;
    --color-border-primary: #e2e8f0;
    --color-accent: #000000; /* Mercedes-Benz Schwarz statt Blau */
    --color-accent-hover: #333333;
    --color-accent-text: #ffffff;
    --color-shadow: rgba(0, 0, 0, 0.1);
    --card-radius: 1rem; /* Abgerundete Ecken für Karten */
  }

  .dark {
    /* Mercedes Deep Black Dark Mode */
    --color-bg-primary: #000000; /* Tiefes Schwarz wie Dashboard */
    --color-bg-secondary: #0a0a0a; /* Sehr dunkles Grau */
    --color-text-primary: #ffffff;
    --color-text-secondary: #e2e8f0;
    --color-text-muted: #94a3b8;
    --color-border-primary: #1a1a1a; /* Dunkler Rahmen */
    --color-accent: #ffffff; /* Reines Weiß */
    --color-accent-hover: #f0f0f0;
    --color-accent-text: #000000;
    --color-shadow: rgba(0, 0, 0, 0.8); /* Sehr dunkler Schatten */
    --mb-black: #000000; /* Mercedes-Benz Schwarz */
  }
  
  body {
    @apply bg-white dark:bg-mercedes-black text-slate-900 dark:text-white transition-colors duration-300;
    position: relative;
    min-height: 100vh;
  }

  .dark body {
    background: #000000; /* Reines Schwarz wie Dashboard */
  }
}

/* Mercedes Professional Grid System */
@layer components {
  /* Dashboard-style Container */
  .mercedes-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  /* Grid Layouts wie Dashboard */
  .stats-grid {
    @apply grid gap-card-md;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  
  @screen sm {
    .stats-grid {
      @apply grid-cols-stats-tablet gap-card-md;
    }
  }
  
  @screen lg {
    .stats-grid {
      @apply grid-cols-stats-desktop gap-card-lg;
    }
  }
  
  /* Card Grid für Drucker/Jobs etc. */
  .cards-grid {
    @apply grid gap-card-md;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
  
  @screen md {
    .cards-grid {
      @apply grid-cols-cards-tablet gap-card-md;
    }
  }
  
  @screen lg {
    .cards-grid {
      @apply grid-cols-cards-desktop gap-card-lg;
    }
  }
  
  @screen xl {
    .cards-grid {
      @apply grid-cols-wide-desktop gap-card-lg;
    }
  }
  
  /* Professional Section Spacing */
  .section-spacing {
    @apply space-y-10;
  }
  
  /* Mercedes Deep Black Cards */
  .mercedes-card {
    @apply bg-white/90 dark:bg-deep-black-surface/90 backdrop-blur-mercedes border border-gray-200/50 dark:border-deep-black-border/50 rounded-mercedes p-6 shadow-card-dark hover:shadow-mercedes-hover transition-all duration-400 hover:-translate-y-1;
  }
  
  /* Dashboard-style Stats Cards */
  .dashboard-stat-card {
    @apply mercedes-card relative overflow-hidden;
  }
  
  .dashboard-stat-card::before {
    content: '';
    @apply absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-status-info via-status-success to-status-warning;
  }
  
  /* Professional Hero Sections */
  .mercedes-hero {
    @apply relative bg-gradient-to-br from-gray-50 via-white to-gray-100 dark:from-mercedes-black dark:via-mercedes-dark-gray dark:to-mercedes-black py-16 lg:py-24 overflow-hidden;
  }
  
  .mercedes-hero::before {
    content: '';
    @apply absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent dark:via-white/5 opacity-50;
  }
  
  /* Button System - Dashboard Style */
  .btn-mercedes {
    @apply px-6 py-3 rounded-card font-semibold text-sm uppercase tracking-wide transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 backdrop-blur-mercedes border;
  }
  
  .btn-mercedes-primary {
    @apply btn-mercedes bg-mercedes-black/90 dark:bg-white/90 text-white dark:text-black border-mercedes-black/20 dark:border-white/20 hover:bg-mercedes-black dark:hover:bg-white shadow-mercedes-glass hover:shadow-mercedes-hover;
  }
  
  .btn-mercedes-secondary {
    @apply btn-mercedes bg-white/20 dark:bg-white/10 text-gray-900 dark:text-white border-white/30 dark:border-white/20 hover:bg-white/30 dark:hover:bg-white/20 shadow-mercedes-glass;
  }
  
  /* Status Indicators - Dashboard Style */
  .status-indicator-mercedes {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold backdrop-blur-sm;
  }
  
  .status-online {
    @apply status-indicator-mercedes bg-status-online/20 text-status-online border border-status-online/30;
  }
  
  .status-offline {
    @apply status-indicator-mercedes bg-status-offline/20 text-status-offline border border-status-offline/30;
  }
  
  .status-warning {
    @apply status-indicator-mercedes bg-status-warning/20 text-status-warning border border-status-warning/30;
  }
  
  /* Professional Form Elements */
  .form-input-mercedes {
    @apply w-full px-4 py-3 bg-white/80 dark:bg-deep-black-surface/80 border border-gray-300/50 dark:border-deep-black-border rounded-card text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-deep-black-text-muted focus:outline-none focus:ring-2 focus:ring-mercedes-black/50 dark:focus:ring-white/50 focus:border-transparent transition-all duration-300 backdrop-blur-mercedes;
  }
  
  /* Grid Gap Utilities - Dashboard Consistent */
  .gap-dashboard {
    @apply gap-6 lg:gap-8;
  }
  
  .gap-cards {
    @apply gap-4 md:gap-6;
  }
  
  .gap-stats {
    @apply gap-4 lg:gap-6;
  }
}