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

/* Custom Styles für Light und Dark Mode */
@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 {
    /* Dark Mode Farben - Dunkler gemacht */
    --color-bg-primary: #0a0f1a; /* Dunkler als vorher */
    --color-bg-secondary: #131c2e; /* Dunkler als vorher */
    --color-text-primary: #f8fafc;
    --color-text-secondary: #e2e8f0;
    --color-text-muted: #94a3b8;
    --color-border-primary: #1e293b; /* Angepasst */
    --color-accent: #f8fafc; /* Weiß statt Indigo */
    --color-accent-hover: #e2e8f0;
    --color-accent-text: #0f172a;
    --color-shadow: rgba(0, 0, 0, 0.5); /* Dunklerer Schatten */
    --mb-black: #000000; /* Mercedes-Benz Schwarz */
  }
  
  body {
    @apply bg-white dark:bg-[#050505] text-slate-900 dark:text-slate-200 transition-colors duration-300;
  }

  /* Navbar Styles - Glassmorphism ohne überlagerte Hintergründe */
  nav {
    @apply bg-white/70 dark:bg-black/70 backdrop-blur-lg border-b border-gray-200/80 dark:border-slate-700/30 shadow-md transition-all duration-300;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  }
  
  /* Benutzer-Dropdown Styles */
  #user-dropdown {
    @apply absolute right-0 mt-2 w-64 bg-white/70 dark:bg-black/70 backdrop-blur-lg border border-gray-200/80 dark:border-slate-700/30 rounded-xl shadow-xl transition-all duration-200 z-50;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    animation: fadeIn 0.2s ease-out forwards;
  }
}

/* Glassmorphism Flash Messages */
.flash-message {
  @apply bg-white/70 dark:bg-black/70 backdrop-blur-md border border-gray-200 dark:border-slate-700/50 rounded-xl p-4 relative mb-4 shadow-md;
  animation: slide-down 0.3s ease-out forwards;
  transition: all 0.3s ease;
}

.flash-message.info {
  @apply border-l-4 border-blue-500;
}

.flash-message.success {
  @apply border-l-4 border-green-500;
}

.flash-message.warning {
  @apply border-l-4 border-yellow-500;
}

.flash-message.error {
  @apply border-l-4 border-red-500;
}

@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mercedes Background Pattern */
.mercedes-background::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80' opacity='0.03' fill='currentColor'%3E%3Cpath d='M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40c0,6.2-1.5,12-4.3,17.1L58.6,46.8z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: repeat;
  background-size: 120px 120px;
  pointer-events: none;
  opacity: 0.03;
  transition: opacity 0.3s ease;
}

.dark .mercedes-background::before {
  opacity: 0.02; /* Leicht reduziert für dunkleren Hintergrund */
  filter: invert(1);
}

/* Monochrome Button Styles */
@layer components {
  /* Buttons im Light Mode Schwarz statt Blau */
  .btn-primary {
    @apply bg-black hover:bg-gray-800 dark:bg-white dark:hover:bg-gray-200 text-white dark:text-slate-900 px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 shadow-sm;
  }
  
  .btn-secondary {
    @apply bg-white hover:bg-gray-100 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-900 dark:text-white border border-gray-300 dark:border-slate-700 px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 shadow-sm;
  }
  
  .btn-outline {
    @apply border-2 border-black hover:bg-black dark:border-white dark:hover:bg-white text-black hover:text-white dark:text-white dark:hover:text-slate-900 px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
  }
  
  /* Glassmorphism Card mit abgerundeten Ecken */
  .glass-card {
    @apply bg-white/80 dark:bg-black/80 backdrop-blur-md border border-gray-200 dark:border-slate-700/50 rounded-xl p-6 shadow-lg transition-all duration-300;
    border-radius: var(--card-radius);
  }
  
  /* Dashboard Cards mit schwarzem Hintergrund */
  .dashboard-card {
    @apply bg-white/70 dark:bg-black/90 backdrop-blur-lg border border-gray-200/80 dark:border-slate-700/30 rounded-xl p-6 shadow-lg transition-all duration-300;
    border-radius: var(--card-radius);
  }
  
  /* Navigation Styles */
  .nav-link {
    @apply flex items-center px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700/50 hover:shadow-md;
  }
  
  .nav-link.active {
    @apply text-slate-900 dark:text-white bg-slate-100 dark:bg-black shadow-sm;
  }

  /* Verbesserte Navbar Styles - Glassmorphism ohne überlagerte Hintergründe */
  .navbar {
    @apply sticky top-0 z-50 backdrop-blur-xl border-b border-gray-200/50 dark:border-slate-700/20 shadow-lg;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
  }

  .dark .navbar {
    background: rgba(0, 0, 0, 0.6); /* Transparenter für stärkeren Glaseffekt */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  }

  .navbar-brand {
    @apply flex items-center space-x-2 transition-transform duration-300 hover:scale-105;
  }

  .navbar-menu {
    @apply flex items-center justify-center space-x-1 md:space-x-3 lg:space-x-6 p-2 rounded-full;
    background: transparent;
  }

  .navbar-button {
    @apply p-2 rounded-full transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  /* User Menu Styles */
  .user-menu-button {
    @apply flex items-center space-x-2 rounded-lg p-1 transition-all duration-300 hover:bg-gray-100/80 dark:hover:bg-slate-700/60 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2;
  }

  .user-avatar {
    @apply w-10 h-10 bg-black dark:bg-white text-white dark:text-slate-900 rounded-full flex items-center justify-center font-bold text-sm shadow-md transition-all duration-300 hover:shadow-lg;
  }
  
  /* Avatar im Dropdown */
  .avatar-large {
    @apply w-14 h-14 bg-black dark:bg-white text-white dark:text-slate-900 rounded-full flex items-center justify-center font-bold text-lg shadow-md;
  }

  .user-dropdown-item {
    @apply flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-gray-100/80 dark:hover:bg-slate-700/60 hover:text-slate-900 dark:hover:text-white transition-all duration-300 focus:outline-none focus:bg-gray-100/80 dark:focus:bg-slate-700/60;
  }

  .user-dropdown-separator {
    @apply border-t border-gray-200/80 dark:border-slate-700/30 my-1;
  }

  .menu-item {
    @apply flex items-center space-x-2 px-4 py-2.5 text-slate-700 dark:text-slate-300 rounded-full hover:bg-white/50 dark:hover:bg-slate-800/50 hover:text-slate-900 dark:hover:text-white transition-all duration-300 hover:shadow-md;
  }

  .menu-item.active {
    @apply bg-white/60 dark:bg-black/60 text-slate-900 dark:text-white font-medium shadow-sm backdrop-blur-sm;
  }
  
  /* Dropdown Styles */
  .user-dropdown {
    @apply absolute right-0 mt-2 w-64 bg-white/90 dark:bg-black/90 backdrop-blur-xl border border-gray-200/80 dark:border-slate-700/30 rounded-xl shadow-xl z-50 overflow-hidden;
    animation: fadeIn 0.2s ease-out forwards;
  }
  
  .dropdown-header {
    @apply flex items-center p-4 border-b border-gray-200/80 dark:border-slate-700/30;
  }
  
  .dropdown-item {
    @apply flex items-center gap-3 px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-gray-100/80 dark:hover:bg-slate-700/60 hover:text-slate-900 dark:hover:text-white transition-all duration-300;
  }
  
  .dropdown-divider {
    @apply border-t border-gray-200/80 dark:border-slate-700/30;
  }
  
  /* Mercedes-Benz Logo Animation */
  @keyframes mercedes-rotate {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(90deg); }
    50% { transform: rotate(180deg); }
    75% { transform: rotate(270deg); }
    100% { transform: rotate(360deg); }
  }
  
  .navbar-brand:hover svg {
    animation: mercedes-rotate 5s infinite linear;
    transform-origin: center;
  }
}

/* Dark Mode Toggle - Schwarz statt Blau im Light Mode */
.dark-mode-toggle {
  @apply p-3 rounded-full bg-black/90 hover:bg-gray-800/90 dark:bg-white/90 dark:hover:bg-gray-200/90 text-white dark:text-slate-900 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 shadow-md;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  min-width: 42px;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Animation für Dropdown */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.dropdown-animation {
  animation: fadeIn 0.2s ease-out forwards;
} 

/* Dashboard Stat Cards mit schwarzem Hintergrund im Dark Mode */
.mb-stat-card {
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f2ff 100%);
  color: #0f172a;
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: var(--card-radius);
}

.dark .mb-stat-card {
  background: linear-gradient(135deg, #000000 0%, #0a0a0a 100%); /* Noch dunkleres Schwarz */
  color: var(--text-primary, #f8fafc);
}

/* Stats und Jobs Page Card Styles */
.stats-card, .job-card {
  @apply bg-white/70 dark:bg-black/90 backdrop-blur-lg border border-gray-200/80 dark:border-slate-700/30 rounded-xl shadow-lg transition-all duration-300;
  border-radius: var(--card-radius);
} 

/* Footer Styling */
footer {
  @apply bg-white/70 dark:bg-black/70 backdrop-blur-lg border-t border-gray-200/80 dark:border-slate-700/30 transition-all duration-300;
}

/* Dropdown Pfeil Animation */
.dropdown-arrow {
  @apply transition-transform duration-300;
}

/* Mercedes-Benz Hintergrund mit Star-Pattern */
.mercedes-star-bg {
  position: relative;
}

.mercedes-star-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80' opacity='0.05' fill='currentColor'%3E%3Cpath d='M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40c0,6.2-1.5,12-4.3,17.1L58.6,46.8z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: repeat;
  background-size: 40px 40px;
  z-index: -1;
  opacity: 0.05;
}

.dark .mercedes-star-bg::after {
  opacity: 0.03;
  filter: invert(1);
}