/* Custom styles for EduFit 2.0 with Tailwind CSS and DaisyUI */

/* Light Theme Colors */
[data-theme="light"] {
  --primary: #3b82f6;
  --primary-content: #ffffff;
  --secondary: #10b981;
  --secondary-content: #ffffff;
  --accent: #f59e0b;
  --accent-content: #ffffff;
  --neutral: #6b7280;
  --base-100: #ffffff;
  --base-200: #f3f4f6;
  --base-300: #e5e7eb;
  --base-content: #1f2937;
  --info: #3b82f6;
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
}

/* Dark Theme Colors */
[data-theme="dark"] {
  --primary: #60a5fa;
  --primary-content: #1e293b;
  --secondary: #34d399;
  --secondary-content: #064e3b;
  --accent: #fbbf24;
  --accent-content: #451a03;
  --neutral: #9ca3af;
  --base-100: #1e293b;
  --base-200: #334155;
  --base-300: #475569;
  --base-content: #f1f5f9;
  --info: #60a5fa;
  --success: #34d399;
  --warning: #fbbf24;
  --error: #f87171;
}

/* Hide elements with hidden class */
.hidden {
  display: none !important;
}

/* Tab link styles */
.tab-link {
  @apply flex flex-col items-center gap-1 p-2 text-base-content/70 transition-colors;
}

.tab-link.active {
  @apply text-primary;
}

.tab-link:hover {
  @apply text-primary;
}

/* Exercise card styles */
.exercise-card {
  @apply card bg-base-100 shadow-sm border border-base-300 cursor-pointer transition-all hover:shadow-md hover:-translate-y-1;
}

.exercise-card:hover {
  @apply border-primary;
}

/* Chat message styles */
.chat-message {
  @apply p-3 rounded-lg mb-2 max-w-xs;
}

.chat-message.user {
  @apply bg-primary text-primary-content ml-auto;
}

.chat-message.coach {
  @apply bg-base-200 text-base-content mr-auto;
}

/* Progress ring animation */
@keyframes progress-ring {
  from {
    stroke-dasharray: 0 100;
  }
}

.radial-progress {
  animation: progress-ring 1s ease-in-out;
}

/* Custom scrollbar for chat */
#chat-messages::-webkit-scrollbar {
  width: 6px;
}

#chat-messages::-webkit-scrollbar-track {
  @apply bg-base-300 rounded-full;
}

#chat-messages::-webkit-scrollbar-thumb {
  @apply bg-base-content/30 rounded-full;
}

#chat-messages::-webkit-scrollbar-thumb:hover {
  @apply bg-base-content/50;
}

/* Exercise image styles */
.exercise-image {
  @apply w-16 h-16 rounded-lg bg-base-200 flex items-center justify-center overflow-hidden;
}

.exercise-image img {
  @apply w-full h-full object-cover;
}

/* Nutrition card styles */
.nutrition-card {
  @apply card bg-base-100 shadow-sm border border-base-300;
}

.nutrition-card img {
  @apply w-16 h-16 rounded-lg object-cover;
}

/* Mindfulness card styles */
.mindfulness-card {
  @apply card bg-base-100 shadow-sm border border-base-300 cursor-pointer transition-all hover:shadow-md hover:-translate-y-1;
}

.mindfulness-card:hover {
  @apply border-primary;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .drawer-side {
    @apply w-72;
  }
  
  .btm-nav {
    @apply fixed bottom-0 left-0 right-0 bg-base-100 border-t border-base-300 z-50;
  }
  
  .btm-nav .tab-link {
    @apply flex-1;
  }
}

/* Animation for route transitions */
.route {
  @apply transition-opacity duration-300;
}

.route.hidden {
  @apply opacity-0 pointer-events-none;
}

/* Custom button styles */
.btn-primary {
  @apply bg-primary hover:bg-primary-focus text-primary-content;
}

/* Card hover effects */
.card {
  @apply transition-all duration-200;
}

.card:hover {
  @apply shadow-lg;
}

/* Input focus styles */
.input:focus,
.select:focus {
  @apply border-primary ring-2 ring-primary/20;
}

/* Progress bar animations */
.progress {
  @apply transition-all duration-500;
}

/* Radial progress animations */
.radial-progress {
  @apply transition-all duration-500;
}

/* Custom grid for exercises */
#exercises-list {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
}

/* Custom grid for nutrition */
#nutrition-list {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
}

/* Custom grid for mindfulness */
#mindfulness-list {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
}

/* Loading states */
.loading {
  @apply animate-pulse;
}

/* Error states */
.error {
  @apply text-error;
}

/* Success states */
.success {
  @apply text-success;
}

/* Custom spacing for mobile */
@media (max-width: 640px) {
  .drawer-content {
    @apply pb-20;
  }
}

/* Custom drawer styles */
.drawer-toggle:checked ~ .drawer-content {
  @apply translate-x-0;
}

/* Custom btm-nav styles */
.btm-nav {
  @apply flex justify-around items-center py-2;
}

.btm-nav .tab-link {
  @apply flex flex-col items-center gap-1 p-2 text-base-content/70 transition-colors;
}

.btm-nav .tab-link.active {
  @apply text-primary;
}

.btm-nav .tab-link:hover {
  @apply text-primary;
}

.btm-nav-label {
  @apply text-xs;
}

/* Custom sidebar styles */
.drawer-side {
  @apply bg-base-200;
}

/* Custom header styles */
.navbar {
  @apply sticky top-0 z-40;
}

/* Custom content styles */
.drawer-content {
  @apply min-h-screen;
}

/* Custom card styles for different sections */
.sport-card {
  @apply card bg-base-100 shadow-sm border border-base-300;
}

.nutrition-card {
  @apply card bg-base-100 shadow-sm border border-base-300;
}

.mindfulness-card {
  @apply card bg-base-100 shadow-sm border border-base-300;
}

/* Custom exercise grid */
.exercise-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
}

/* Custom nutrition grid */
.nutrition-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
}

/* Custom mindfulness grid */
.mindfulness-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
}

/* Custom chat styles */
.chat-container {
  @apply h-96;
}

.chat-messages {
  @apply overflow-y-auto;
}

/* Custom button styles for different actions */
.btn-start-workout {
  @apply btn btn-primary btn-sm;
}

.btn-view-profile {
  @apply btn btn-primary btn-sm;
}

.btn-send-message {
  @apply btn btn-primary;
}

/* Custom input styles */
.search-input {
  @apply input input-bordered w-full;
}

.filter-select {
  @apply select select-bordered;
}

/* Custom progress styles */
.progress-ring {
  @apply transition-all duration-500;
}

/* Custom animation for cards */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: slideIn 0.3s ease-out;
}

/* Custom styles for different themes */
.theme-light {
  @apply bg-base-100 text-base-content;
}

.theme-dark {
  @apply bg-base-300 text-base-content;
}

/* Custom styles for mobile navigation */
@media (max-width: 1024px) {
  .drawer-side {
    @apply w-72;
  }
}

/* Custom styles for desktop navigation */
@media (min-width: 1024px) {
  .drawer-side {
    @apply w-80;
  }
}

/* Custom styles for exercise cards */
.exercise-card .exercise-image {
  @apply w-16 h-16 rounded-lg bg-base-200 flex items-center justify-center overflow-hidden;
}

.exercise-card .exercise-details {
  @apply flex-1;
}

.exercise-card .exercise-name {
  @apply font-semibold text-base;
}

.exercise-card .exercise-muscle {
  @apply text-sm text-base-content/70;
}

.exercise-card .exercise-equipment {
  @apply text-sm text-primary;
}

/* Custom styles for nutrition cards */
.nutrition-card .nutrition-image {
  @apply w-16 h-16 rounded-lg object-cover;
}

.nutrition-card .nutrition-title {
  @apply font-semibold text-base;
}

.nutrition-card .nutrition-description {
  @apply text-sm text-base-content/70;
}

/* Custom styles for mindfulness cards */
.mindfulness-card .mindfulness-image {
  @apply w-16 h-16 rounded-lg object-cover;
}

.mindfulness-card .mindfulness-title {
  @apply font-semibold text-base;
}

.mindfulness-card .mindfulness-description {
  @apply text-sm text-base-content/70;
}

/* Custom styles for chat messages */
.chat-message {
  @apply p-3 rounded-lg mb-2 max-w-xs break-words;
}

.chat-message.user {
  @apply bg-primary text-primary-content ml-auto;
}

.chat-message.coach {
  @apply bg-base-200 text-base-content mr-auto;
}

/* Custom styles for progress indicators */
.progress-indicator {
  @apply w-full bg-base-300 rounded-full h-2;
}

.progress-indicator .progress-bar {
  @apply bg-primary h-2 rounded-full transition-all duration-500;
}

/* Custom styles for radial progress */
.radial-progress {
  @apply relative inline-flex items-center justify-center;
}

.radial-progress::before {
  content: '';
  @apply absolute inset-0 rounded-full;
  background: conic-gradient(var(--tw-color-primary) 0deg, var(--tw-color-primary) calc(var(--value) * 3.6deg), var(--tw-color-base-300) calc(var(--value) * 3.6deg), var(--tw-color-base-300) 360deg);
}

/* Custom styles for different sections */
.section-header {
  @apply flex items-center justify-between mb-6;
}

.section-title {
  @apply text-2xl font-bold;
}

.section-content {
  @apply space-y-4;
}

/* Custom styles for filters */
.filter-container {
  @apply flex flex-wrap gap-4 mb-6;
}

.filter-input {
  @apply input input-bordered flex-1 min-w-64;
}

.filter-select {
  @apply select select-bordered;
}

/* Custom styles for grids */
.content-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
}

/* Custom styles for cards */
.content-card {
  @apply card bg-base-100 shadow-sm border border-base-300 cursor-pointer transition-all hover:shadow-md hover:-translate-y-1;
}

.content-card:hover {
  @apply border-primary;
}

/* Custom styles for images */
.content-image {
  @apply w-16 h-16 rounded-lg object-cover;
}

/* Custom styles for text */
.content-title {
  @apply font-semibold text-base;
}

.content-description {
  @apply text-sm text-base-content/70;
}

/* Custom styles for buttons */
.action-button {
  @apply btn btn-primary btn-sm;
}

/* Custom styles for navigation */
.navigation-item {
  @apply flex items-center gap-2 p-2 rounded-lg transition-colors;
}

.navigation-item:hover {
  @apply bg-base-200;
}

.navigation-item.active {
  @apply bg-primary text-primary-content;
}

/* Custom styles for sidebar */
.sidebar-content {
  @apply space-y-2;
}

.sidebar-item {
  @apply flex items-center gap-3 p-3 rounded-lg transition-colors;
}

.sidebar-item:hover {
  @apply bg-base-200;
}

.sidebar-item.active {
  @apply bg-primary text-primary-content;
}

/* Custom styles for mobile */
@media (max-width: 768px) {
  .mobile-hidden {
    @apply hidden;
  }
  
  .mobile-visible {
    @apply block;
  }
}

/* Custom styles for desktop */
@media (min-width: 768px) {
  .desktop-hidden {
    @apply hidden;
  }
  
  .desktop-visible {
    @apply block;
  }
}

/* Sport Dashboard Styles */
.sport-dashboard {
  @apply transition-all duration-300;
}

.workout-option-card {
  @apply card bg-base-100 shadow-lg cursor-pointer hover:shadow-xl transition-all duration-300 hover:-translate-y-1;
}

.workout-option-card:hover {
  @apply border-primary;
}

.workout-option-card .card-body {
  @apply text-center p-6;
}

.workout-option-card i {
  @apply text-4xl mb-4;
}

.workout-option-card h3 {
  @apply text-xl font-bold mb-2;
}

.workout-option-card p {
  @apply text-base-content/70;
}

/* Custom Workout Builder Styles */
.custom-workout-builder {
  @apply transition-all duration-300;
}

.exercise-selector {
  @apply card bg-base-100 shadow-sm border border-base-300 cursor-pointer hover:shadow-md transition-all hover:border-primary;
}

.exercise-selector:hover {
  @apply transform -translate-y-1;
}

.selected-exercise {
  @apply card bg-base-100 shadow-sm border border-primary;
}

.selected-exercise .card-body {
  @apply p-4;
}

.exercise-inputs {
  @apply flex items-center gap-2;
}

.exercise-inputs input {
  @apply input input-bordered input-sm w-16;
}

/* Theme Transition */
* {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Gradient Cards for Sport Dashboard */
.gradient-card {
  @apply card text-white shadow-lg;
}

.gradient-card.blue {
  @apply bg-gradient-to-r from-blue-500 to-blue-600;
}

.gradient-card.green {
  @apply bg-gradient-to-r from-green-500 to-green-600;
}

.gradient-card.purple {
  @apply bg-gradient-to-r from-purple-500 to-purple-600;
}

.gradient-card.orange {
  @apply bg-gradient-to-r from-orange-500 to-orange-600;
}

.gradient-card.red {
  @apply bg-gradient-to-r from-red-500 to-red-600;
}

.gradient-card.teal {
  @apply bg-gradient-to-r from-teal-500 to-teal-600;
}

/* Navigation Styles */
.nav-link {
  @apply flex items-center gap-2 px-3 py-2 rounded-lg transition-all duration-200;
}

.nav-link:hover {
  @apply bg-base-200;
}

.nav-link.active {
  @apply bg-primary text-primary-content;
}

.nav-link i {
  @apply text-lg;
}

.nav-link span {
  @apply font-medium;
}

/* Sport Section Specific Styles */
.sport-section {
  @apply min-h-screen;
}

.sport-dashboard-main {
  @apply space-y-8;
}

.sport-stats-grid {
  @apply grid grid-cols-1 md:grid-cols-3 gap-6;
}

.sport-options-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

/* Custom Workout Styles */
.custom-workout-section {
  @apply space-y-6;
}

.exercise-search-section {
  @apply space-y-4;
}

.exercise-search-filters {
  @apply flex flex-wrap gap-4;
}

.exercise-search-input {
  @apply input input-bordered flex-1 min-w-64;
}

.exercise-filter-select {
  @apply select select-bordered;
}

.exercise-results {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 max-h-96 overflow-y-auto;
}

.selected-exercises-section {
  @apply space-y-4;
}

.selected-exercise-item {
  @apply card bg-base-100 shadow-sm;
}

.selected-exercise-item .card-body {
  @apply p-4;
}

.exercise-item-content {
  @apply flex items-center gap-4;
}

.exercise-item-image {
  @apply w-12 h-12 rounded-lg bg-base-200 flex items-center justify-center overflow-hidden;
}

.exercise-item-image img {
  @apply w-full h-full object-cover;
}

.exercise-item-details {
  @apply flex-1;
}

.exercise-item-name {
  @apply font-semibold;
}

.exercise-item-muscles {
  @apply text-sm text-base-content/70;
}

.exercise-item-controls {
  @apply flex items-center gap-2;
}

.exercise-item-input {
  @apply input input-bordered input-sm w-16;
}

.exercise-item-remove {
  @apply btn btn-error btn-sm;
}

/* Workout History Styles */
.workout-history-item {
  @apply card bg-base-100 shadow-sm;
}

.workout-history-item .card-body {
  @apply p-4;
}

.workout-history-content {
  @apply flex items-center justify-between;
}

.workout-history-info h3 {
  @apply font-semibold;
}

.workout-history-info p {
  @apply text-sm text-base-content/70;
}

.workout-history-stats {
  @apply text-right;
}

.workout-history-stats p:first-child {
  @apply font-semibold;
}

.workout-history-stats p:last-child {
  @apply text-sm text-base-content/70;
}

/* Theme Toggle Styles */
.theme-toggle {
  @apply btn btn-ghost btn-circle;
}

.theme-toggle i {
  @apply text-lg;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .nav-link {
    @apply px-2 text-sm;
  }
  
  .nav-link span {
    @apply text-xs;
  }
  
  .sport-stats-grid {
    @apply grid-cols-1;
  }
  
  .sport-options-grid {
    @apply grid-cols-1;
  }
  
  .exercise-search-filters {
    @apply flex-col;
  }
  
  .exercise-search-input {
    @apply w-full;
  }
  
  /* Make navbar scrollable on mobile */
  .navbar .menu {
    @apply overflow-x-auto;
  }
  
  .navbar .menu li {
    @apply flex-shrink-0;
  }
}

/* Animation for smooth transitions */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* Custom scrollbar for exercise lists */
.exercise-results::-webkit-scrollbar {
  width: 6px;
}

.exercise-results::-webkit-scrollbar-track {
  @apply bg-base-300 rounded-full;
}

.exercise-results::-webkit-scrollbar-thumb {
  @apply bg-base-content/30 rounded-full;
}

.exercise-results::-webkit-scrollbar-thumb:hover {
  @apply bg-base-content/50;
}

/* Auth login page enhancements */
.auth-hero {
  background: radial-gradient(1200px 600px at 10% 10%, rgba(255,255,255,0.08), transparent 50%),
              radial-gradient(1000px 500px at 90% 90%, rgba(255,255,255,0.06), transparent 60%),
              linear-gradient(135deg, #2563eb, #4f46e5 50%, #7c3aed);
}
.auth-login .login-card {
  box-shadow: 0 20px 40px rgba(0,0,0,0.25), 0 10px 20px rgba(79,70,229,0.25);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.25);
}
.auth-login .login-card .btn-primary {
  box-shadow: 0 8px 16px rgba(59,130,246,0.35);
  transition: transform .08s ease, box-shadow .2s ease;
}
.auth-login .login-card .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(59,130,246,0.45);
}
.auth-login .login-card .input {
  transition: box-shadow .2s ease, transform .06s ease;
}
.auth-login .login-card .input:focus {
  box-shadow: 0 0 0 4px rgba(59,130,246,0.2);
  transform: translateY(-1px);
}
.auth-login .login-card .divider:before,
.auth-login .login-card .divider:after {
  background: linear-gradient(90deg, rgba(79,70,229,.2), rgba(79,70,229,.05));
}

/* Framed login like reference image */
.outer-frame {
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
  box-shadow: 0 30px 60px rgba(0,0,0,0.25);
}
.inner-panel {
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.7));
}
.login-side {
  backdrop-filter: blur(6px);
}
.hero-side::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
  border-radius: 0;
}