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

@layer base {
  html {
    @apply scroll-smooth;
  }
  
  body {
    @apply bg-gray-50 text-gray-800 dark:bg-dark-800 dark:text-gray-100 font-sans;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-bold text-gray-900 dark:text-white;
  }
  
  h1 {
    @apply text-4xl md:text-5xl lg:text-6xl;
  }
  
  h2 {
    @apply text-3xl md:text-4xl;
  }
  
  h3 {
    @apply text-2xl md:text-3xl;
  }
  
  h4 {
    @apply text-xl md:text-2xl;
  }
  
  a {
    @apply text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 transition-colors;
  }
  
  input, textarea, select {
    @apply bg-white border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-dark-700 dark:border-dark-500 dark:focus:ring-primary-400 dark:focus:border-primary-400;
  }
  
  label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
  }
  
  ::placeholder {
    @apply text-gray-400 dark:text-gray-500;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 font-medium rounded-md transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 shadow-sm text-base;
  }
  
  .btn-primary {
    @apply btn bg-primary-600 hover:bg-primary-700 text-white focus:ring-primary-500 hover:shadow-md active:translate-y-0.5 dark:bg-primary-700 dark:hover:bg-primary-600;
  }
  
  .btn-secondary {
    @apply btn bg-secondary-600 hover:bg-secondary-700 text-white focus:ring-secondary-500 hover:shadow-md active:translate-y-0.5 dark:bg-secondary-700 dark:hover:bg-secondary-600;
  }
  
  .btn-outline {
    @apply btn border-2 border-gray-300 dark:border-dark-500 bg-white dark:bg-transparent text-gray-700 dark:text-gray-200 hover:bg-gray-50 hover:border-primary-500 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:border-primary-400 dark:hover:text-primary-400 focus:ring-gray-500 active:translate-y-0.5;
  }
  
  .card {
    @apply bg-white shadow-md dark:bg-dark-700 rounded-lg overflow-hidden border border-gray-200 dark:border-dark-600 hover:shadow-lg transition-shadow duration-300;
  }
  
  .gradient-text {
    @apply text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-secondary-600 dark:from-primary-500 dark:to-secondary-500 font-bold;
  }
  
  .node-tooltip {
    @apply max-w-xs p-3 bg-white text-gray-800 dark:bg-dark-800 dark:text-white rounded-lg shadow-lg text-sm z-50 border border-gray-200 dark:border-dark-600;
  }
  
  .mindmap-node {
    @apply cursor-pointer transition-all duration-200 hover:shadow-lg border-2 border-gray-200 dark:border-dark-600;
  }
  
  /* Mindmap-spezifische Stile */
  .mindmap-container {
    @apply bg-gray-50/80 dark:bg-dark-800/80 rounded-lg p-4 shadow-inner;
  }
  
  .mindmap-node-root {
    @apply bg-primary-100 dark:bg-primary-900 text-primary-900 dark:text-primary-100 border-primary-300 dark:border-primary-700;
  }
  
  .mindmap-node-branch {
    @apply bg-secondary-100 dark:bg-secondary-900 text-secondary-900 dark:text-secondary-100 border-secondary-300 dark:border-secondary-700;
  }
  
  .mindmap-node-leaf {
    @apply bg-gray-100 dark:bg-dark-700 text-gray-800 dark:text-gray-200 border-gray-300 dark:border-dark-500;
  }
  
  .mindmap-link {
    @apply stroke-gray-400 dark:stroke-gray-500 stroke-[2];
  }
  
  .mindmap-link-active {
    @apply stroke-primary-500 dark:stroke-primary-400 stroke-[3];
  }
  
  .form-group {
    @apply mb-4;
  }
  
  .form-control {
    @apply w-full;
  }
  
  .ascii-art {
    @apply font-mono text-xs leading-none whitespace-pre tracking-tight select-none text-primary-700 dark:text-primary-400 opacity-80 dark:opacity-60 font-bold;
  }
  
  /* Verbesserte Formulareingabefelder */
  .form-input,
  .form-textarea,
  .form-select {
    @apply w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-800 shadow-sm
    focus:border-primary-500 focus:ring focus:ring-primary-500 focus:ring-opacity-50
    dark:border-dark-500 dark:bg-dark-700 dark:text-gray-100 dark:focus:border-primary-400 dark:focus:ring-primary-400;
  }
  
  .form-input-lg {
    @apply py-3 text-lg;
  }
  
  .form-input-sm {
    @apply py-1 text-sm;
  }
  
  .form-checkbox, 
  .form-radio {
    @apply h-5 w-5 rounded border-gray-300 text-primary-600 shadow-sm 
    focus:border-primary-500 focus:ring focus:ring-primary-500 focus:ring-opacity-50
    dark:border-dark-500 dark:bg-dark-700 dark:focus:border-primary-400 dark:focus:ring-primary-400;
  }
  
  .form-checkbox {
    @apply rounded;
  }
  
  .form-radio {
    @apply rounded-full;
  }
  
  .form-error {
    @apply mt-1 text-sm text-red-600 dark:text-red-400;
  }
}

@layer utilities {
  .tech-gradient {
    @apply bg-gradient-to-r from-primary-600 to-secondary-500;
  }
  
  .glass-effect {
    @apply bg-white/95 backdrop-blur-md border border-gray-200 shadow-md dark:bg-dark-800/90 dark:border-dark-700/50 dark:shadow-xl;
  }
  
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-primary-400 dark:focus:ring-offset-dark-800;
  }
  
  .input-focus {
    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400;
  }
}

/* Form validation styles */
.is-valid {
  @apply border-green-500 dark:border-green-400;
}

.is-invalid {
  @apply border-red-500 dark:border-red-400;
}

.is-valid:focus {
  @apply ring-green-500/30 border-green-500 dark:ring-green-400/30 dark:border-green-400;
}

.is-invalid:focus {
  @apply ring-red-500/30 border-red-500 dark:ring-red-400/30 dark:border-red-400;
}

.form-hint {
  @apply text-xs text-gray-500 dark:text-gray-400 mt-1;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
}

.input-icon {
  @apply absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-500 dark:text-gray-400;
}

.input-with-icon {
  @apply pl-10;
}