/* Fitness Tracker App - Custom Styles */

/* Übergangsanimationen */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Modal Styles */
.modal-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.modal-content {
  max-height: 80vh;
  overflow-y: auto;
}

/* Progress Bar Animations */
.progress-bar {
  transition: width 0.6s ease;
}

/* Form Styles */
.form-input {
  @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors;
}

.form-select {
  @apply w-full px-4 py-2 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors;
}

.form-textarea {
  @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors resize-none;
}

.btn-primary {
  @apply px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors font-medium;
}

.btn-secondary {
  @apply px-6 py-3 bg-gray-500 text-white rounded-lg hover:bg-gray-600 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors font-medium;
}

.btn-success {
  @apply px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors font-medium;
}

.btn-danger {
  @apply px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors font-medium;
}

/* Exercise Card Styles */
.exercise-card {
  @apply bg-white rounded-xl shadow-md border border-gray-200 hover:shadow-xl transition-all duration-300 cursor-pointer overflow-hidden;
}

.exercise-card:hover {
  @apply border-blue-400 transform -translate-y-1;
}

.exercise-gif {
  @apply w-full h-48 object-cover rounded-lg border border-gray-200;
}

.exercise-card-header {
  @apply flex justify-between items-start mb-3;
}

.exercise-title {
  @apply text-lg font-bold text-gray-900 mb-1;
}

.exercise-category {
  @apply text-sm font-medium text-blue-600 mb-2;
}

.exercise-muscles {
  @apply text-sm text-gray-600 mb-3;
}

.exercise-meta {
  @apply flex items-center justify-between text-xs text-gray-500 pt-3 border-t border-gray-100;
}

.difficulty-badge {
  @apply px-2 py-1 text-xs font-medium rounded-full;
}

.calories-badge {
  @apply inline-flex items-center px-2 py-1 text-xs bg-orange-100 text-orange-800 rounded-full;
}

/* Exercise Detail Modal */
.exercise-detail-modal {
  @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4;
}

.exercise-detail-content {
  @apply bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-90vh overflow-y-auto;
}

.exercise-detail-header {
  @apply sticky top-0 bg-white border-b border-gray-200 p-6 z-10;
}

.exercise-detail-body {
  @apply p-6 space-y-6;
}

.muscle-group-primary {
  @apply inline-block bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full mr-2 mb-2;
}

.muscle-group-secondary {
  @apply inline-block bg-gray-100 text-gray-700 text-sm px-3 py-1 rounded-full mr-2 mb-2;
}

.instruction-step {
  @apply flex items-start space-x-3 p-3 bg-gray-50 rounded-lg;
}

.instruction-number {
  @apply flex-shrink-0 w-6 h-6 bg-blue-500 text-white text-xs font-bold rounded-full flex items-center justify-center;
}

.variation-item {
  @apply bg-white border border-gray-200 rounded-lg p-3 hover:border-blue-300 transition-colors;
}

.difficulty-badge-1 {
  @apply bg-green-100 text-green-800;
}

.difficulty-badge-2 {
  @apply bg-yellow-100 text-yellow-800;
}

.difficulty-badge-3 {
  @apply bg-orange-100 text-orange-800;
}

.difficulty-badge-4 {
  @apply bg-red-100 text-red-800;
}

.difficulty-badge-5 {
  @apply bg-purple-100 text-purple-800;
}

/* Toast Notifications */
.toast {
  @apply fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 transform transition-transform duration-300;
}

.toast-success {
  @apply bg-green-500 text-white;
}

.toast-error {
  @apply bg-red-500 text-white;
}

.toast-info {
  @apply bg-blue-500 text-white;
}

/* Loading Spinner */
.spinner {
  @apply inline-block w-6 h-6 border-2 border-white border-t-transparent rounded-full animate-spin;
}

/* Statistics Cards */
.stat-card {
  @apply bg-white rounded-xl p-6 shadow-md border-l-4;
}

.stat-card.weight {
  @apply border-l-blue-500;
}

.stat-card.strength {
  @apply border-l-green-500;
}

.stat-card.endurance {
  @apply border-l-purple-500;
}

.stat-card.consistency {
  @apply border-l-orange-500;
}

/* Mobile-First Responsive Design */

/* iPhone 16 Pro Max and large phones (430px width) */
@media (max-width: 430px) {
  /* General mobile optimizations */
  body {
    font-size: 16px; /* Prevents zoom on iOS */
    -webkit-text-size-adjust: 100%;
  }
  
  /* Header optimizations */
  .max-w-7xl {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Grid layout for mobile */
  .grid.md\:grid-cols-2, .grid.md\:grid-cols-3, .grid.md\:grid-cols-4 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  /* Card padding adjustments */
  .p-8 {
    padding: 1.5rem;
  }
  
  .p-6 {
    padding: 1.25rem;
  }
  
  /* Button adjustments */
  .px-8 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  /* Text size adjustments */
  .text-4xl, .text-5xl {
    font-size: 2rem;
    line-height: 2.5rem;
  }
  
  .text-3xl {
    font-size: 1.75rem;
    line-height: 2.25rem;
  }
  
  .text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  
  /* Modal optimizations */
  .modal-content {
    max-height: 95vh;
    margin: 0.5rem;
    border-radius: 1rem;
  }
  
  /* Exercise cards mobile */
  .exercise-card {
    padding: 1rem;
  }
  
  .exercise-gif {
    height: 200px;
  }
  
  /* Form optimizations */
  .form-input, .form-select, .form-textarea {
    padding: 0.875rem;
    font-size: 16px; /* Prevents zoom on iOS */
    border-radius: 0.75rem;
  }
  
  /* Toast notifications mobile */
  .toast {
    top: 1rem;
    left: 1rem;
    right: 1rem;
    transform: none;
  }
  
  /* Touch-friendly buttons */
  .btn-primary, .btn-secondary, .btn-success, .btn-danger {
    min-height: 48px;
    touch-action: manipulation;
  }
  
  /* Spacing adjustments */
  .space-y-6 > * + * {
    margin-top: 1rem;
  }
  
  .space-y-4 > * + * {
    margin-top: 0.75rem;
  }
  
  /* Navigation mobile */
  .hidden.lg\:flex {
    display: none !important;
  }
  
  /* Grid adjustments for cards */
  .grid.lg\:grid-cols-3 {
    grid-template-columns: 1fr;
  }
  
  .grid.grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

/* Tablets and medium screens */
@media (max-width: 768px) {
  .modal-content {
    max-height: 90vh;
    margin: 1rem;
  }
  
  .grid-responsive {
    grid-template-columns: 1fr;
  }
  
  /* Sidebar navigation for nutrition */
  .w-64 {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }
  
  .flex {
    flex-direction: column;
  }
  
  .flex-1 {
    padding-top: 0;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .dark-mode .exercise-card {
    @apply bg-gray-800 border-gray-700 text-white;
  }
  
  .dark-mode .modal-content {
    @apply bg-gray-800 text-white;
  }
}

/* Mobile-specific optimizations */
.mobile-optimized {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* Touch interactions */
.touch-target {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}

/* Prevent horizontal scroll */
.mobile-container {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Safe area adjustments for notched phones */
@supports (padding: max(0px)) {
  .safe-area-top {
    padding-top: max(1rem, env(safe-area-inset-top));
  }
  
  .safe-area-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* CSS-basierte Übungsanimationen */
.exercise-animation {
  width: 120px;
  height: 120px;
  position: relative;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Push-up Animation */
.pushup-animation {
  animation: pushup 2s ease-in-out infinite;
}

.pushup-figure {
  width: 80px;
  height: 20px;
  background: linear-gradient(45deg, #3B82F6, #1E40AF);
  border-radius: 10px;
  position: relative;
}

.pushup-figure::before {
  content: '';
  position: absolute;
  left: -10px;
  top: -5px;
  width: 15px;
  height: 15px;
  background: #F59E0B;
  border-radius: 50%;
}

.pushup-figure::after {
  content: '';
  position: absolute;
  right: -15px;
  top: -8px;
  width: 20px;
  height: 12px;
  background: #3B82F6;
  border-radius: 6px;
}

@keyframes pushup {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

/* Plank Animation */
.plank-animation {
  animation: plank 3s ease-in-out infinite;
}

.plank-figure {
  width: 90px;
  height: 16px;
  background: linear-gradient(45deg, #10B981, #059669);
  border-radius: 8px;
  position: relative;
}

.plank-figure::before {
  content: '';
  position: absolute;
  left: -8px;
  top: -3px;
  width: 12px;
  height: 12px;
  background: #F59E0B;
  border-radius: 50%;
}

.plank-figure::after {
  content: '';
  position: absolute;
  right: -12px;
  top: -6px;
  width: 18px;
  height: 10px;
  background: #10B981;
  border-radius: 5px;
}

@keyframes plank {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.02) translateY(-1px); }
  50% { transform: scale(1); }
  75% { transform: scale(0.98) translateY(1px); }
}

/* Squat Animation */
.squat-animation {
  animation: squat 2.5s ease-in-out infinite;
}

.squat-figure {
  width: 60px;
  height: 40px;
  background: linear-gradient(45deg, #EF4444, #DC2626);
  border-radius: 30px 30px 10px 10px;
  position: relative;
}

.squat-figure::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: #F59E0B;
  border-radius: 50%;
}

.squat-figure::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 8px;
  background: #EF4444;
  border-radius: 4px;
}

@keyframes squat {
  0%, 100% { transform: translateY(0px) scaleY(1); }
  50% { transform: translateY(8px) scaleY(0.8); }
}

/* Dumbbell Animation */
.dumbbell-animation {
  animation: dumbbell 1.8s ease-in-out infinite;
}

.dumbbell-figure {
  width: 80px;
  height: 12px;
  background: #6B7280;
  border-radius: 6px;
  position: relative;
}

.dumbbell-figure::before,
.dumbbell-figure::after {
  content: '';
  position: absolute;
  top: -6px;
  width: 20px;
  height: 24px;
  background: #374151;
  border-radius: 4px;
}

.dumbbell-figure::before { left: -2px; }
.dumbbell-figure::after { right: -2px; }

@keyframes dumbbell {
  0%, 100% { transform: rotate(0deg) translateY(0px); }
  25% { transform: rotate(-15deg) translateY(-5px); }
  75% { transform: rotate(15deg) translateY(-5px); }
}

/* Running Animation */
.running-animation {
  animation: running 1.5s ease-in-out infinite;
}

.running-figure {
  width: 50px;
  height: 60px;
  background: linear-gradient(45deg, #8B5CF6, #7C3AED);
  border-radius: 25px 25px 10px 10px;
  position: relative;
}

.running-figure::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  background: #F59E0B;
  border-radius: 50%;
}

.running-figure::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 10px;
  width: 30px;
  height: 8px;
  background: #8B5CF6;
  border-radius: 4px;
  animation: running-legs 1.5s ease-in-out infinite;
}

@keyframes running {
  0%, 100% { transform: translateX(0px) scaleX(1); }
  50% { transform: translateX(5px) scaleX(1.1); }
}

@keyframes running-legs {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.8) translateX(5px); }
}

/* Animation Classes */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUp 0.3s ease-in-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Progress Circle */
.progress-circle {
  transform: rotate(-90deg);
}

.progress-circle circle {
  transition: stroke-dashoffset 0.6s ease;
}

/* Erweiterte Übungsanimationen */
.jumping-jacks-animation {
  animation: jumpingJacks 2s ease-in-out infinite;
}

.jumping-jacks-figure {
  width: 60px;
  height: 80px;
  background: linear-gradient(45deg, #F59E0B, #D97706);
  border-radius: 30px 30px 15px 15px;
  position: relative;
}

.jumping-jacks-figure::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: #F59E0B;
  border-radius: 50%;
}

.jumping-jacks-figure::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 8px;
  background: #D97706;
  border-radius: 4px;
  animation: jumping-arms 2s ease-in-out infinite;
}

@keyframes jumpingJacks {
  0%, 100% { transform: scale(1) translateY(0px); }
  50% { transform: scale(1.1) translateY(-5px); }
}

@keyframes jumping-arms {
  0%, 100% { width: 40px; }
  50% { width: 60px; }
}

/* Burpees Animation */
.burpees-animation {
  animation: burpees 3s ease-in-out infinite;
}

.burpees-figure {
  width: 70px;
  height: 30px;
  background: linear-gradient(45deg, #EF4444, #B91C1C);
  border-radius: 15px;
  position: relative;
}

.burpees-figure::before {
  content: '';
  position: absolute;
  left: -5px;
  top: -8px;
  width: 15px;
  height: 15px;
  background: #F59E0B;
  border-radius: 50%;
}

@keyframes burpees {
  0% { transform: translateY(0px) scaleY(1); }
  25% { transform: translateY(-10px) scaleY(0.7); }
  50% { transform: translateY(0px) scaleY(1); }
  75% { transform: translateY(5px) scaleY(1.2); }
  100% { transform: translateY(0px) scaleY(1); }
}

/* Mountain Climbers Animation */
.mountain-climbers-animation {
  animation: mountainClimbers 1.5s ease-in-out infinite;
}

.mountain-climbers-figure {
  width: 80px;
  height: 25px;
  background: linear-gradient(45deg, #10B981, #047857);
  border-radius: 12px;
  position: relative;
}

.mountain-climbers-figure::before {
  content: '';
  position: absolute;
  left: -8px;
  top: -6px;
  width: 15px;
  height: 15px;
  background: #F59E0B;
  border-radius: 50%;
}

/* Default Exercise Animation für unbekannte Übungen */
.default-exercise-animation {
  animation: default-exercise 1.5s ease-in-out infinite;
}

@keyframes default-exercise {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.05) rotate(2deg);
  }
  75% {
    transform: scale(1.05) rotate(-2deg);
  }
}

.default-exercise-animation .exercise-figure {
  width: 25px;
  height: 35px;
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
  border-radius: 12px 12px 8px 8px;
  position: relative;
  margin: 0 auto;
}

.default-exercise-animation .exercise-figure::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: #F59E0B;
  border-radius: 50%;
}

.default-exercise-animation .exercise-figure::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 2px;
  width: 8px;
  height: 12px;
  background: #1D4ED8;
  border-radius: 4px;
  box-shadow: 13px 0 0 #1D4ED8;
}

.mountain-climbers-figure::after {
  content: '';
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 25px;
  height: 8px;
  background: #10B981;
  border-radius: 4px;
  animation: climbing-legs 1.5s ease-in-out infinite;
}

@keyframes mountainClimbers {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-3px); }
}

@keyframes climbing-legs {
  0%, 100% { transform: scaleX(1) translateX(0px); }
  25% { transform: scaleX(0.7) translateX(-3px); }
  75% { transform: scaleX(1.3) translateX(3px); }
}

/* Lunges Animation */
.lunges-animation {
  animation: lunges 2.5s ease-in-out infinite;
}

.lunges-figure {
  width: 50px;
  height: 70px;
  background: linear-gradient(45deg, #8B5CF6, #6D28D9);
  border-radius: 25px 25px 8px 20px;
  position: relative;
}

.lunges-figure::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  background: #F59E0B;
  border-radius: 50%;
}

@keyframes lunges {
  0%, 100% { transform: skewX(0deg) translateY(0px); }
  50% { transform: skewX(-10deg) translateY(8px); }
}

/* Animation Container */
.exercise-animation-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  background: linear-gradient(135deg, #F3F4F6, #E5E7EB);
  border-radius: 20px;
  margin: 0 auto 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 2px solid #E5E7EB;
  transition: all 0.3s ease;
}

.exercise-animation-container:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.1);
  border-color: #3B82F6;
}

/* Animation Preview auf Auth-Seite */
.auth-exercise-preview {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 30;
}

.auth-exercise-preview:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
}

.auth-exercise-preview .exercise-animation {
  width: 60px;
  height: 60px;
}

@media (max-width: 768px) {
  .auth-exercise-preview {
    bottom: 15px;
    right: 15px;
    width: 80px;
    height: 80px;
  }
  
  .auth-exercise-preview .exercise-animation {
    width: 50px;
    height: 50px;
  }
}