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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;

    --primary: 358 100% 65%;
    --primary-foreground: 210 40% 98%;
    --primary-hover: 358 100% 55%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --secondary-hover: 214 32% 91%;

    --tertiary: 0 0% 25.1%;
    --tertiary-foreground: 210 40% 98%;
    --tertiary-hover: 24 9.8% 10%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --accent-border: 215 20.2% 65.1%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;

    --ring: 215 20.2% 65.1%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;

    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;

    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;

    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;

    --border: 216 34% 17%;
    --input: 216 34% 17%;

    --card: 224 71% 4%;
    --card-foreground: 213 31% 91%;

    --primary: 358 100% 65%;
    --primary-foreground: 210 40% 98%;
    --primary-hover: 358 100% 55%;

    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;

    --ring: 216 34% 17%;

    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
  }
}

@layer components {
  /* Shimmer effect for next tracker highlighting */
  .shimmer {
    position: relative;
    overflow: hidden;
  }

  .shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(34, 197, 94, 0.3),
      rgba(34, 197, 94, 0.5),
      rgba(34, 197, 94, 0.3),
      transparent
    );
    animation: shimmer 2.5s infinite;
    z-index: 1;
  }

  .dark .shimmer::before {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 0.2),
      transparent
    );
  }

  @keyframes shimmer {
    0% {
      left: -100%;
    }
    100% {
      left: 100%;
    }
  }

  /* Ensure content stays above shimmer */
  .shimmer > * {
    position: relative;
    z-index: 2;
  }

  /* Glassy button styles */
  .glass-button {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
  }

  .glass-button:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 
      0 12px 40px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
  }

  .glass-button:active {
    transform: translateY(0);
    box-shadow: 
      0 4px 20px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  /* Dark mode glass button */
  .dark .glass-button {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .dark .glass-button:hover {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 
      0 12px 40px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  /* Colored glass buttons */
  .glass-button-primary {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    box-shadow: 
      0 8px 32px rgba(34, 197, 94, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .glass-button-primary:hover {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: 
      0 12px 40px rgba(34, 197, 94, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }

  .glass-button-secondary {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    box-shadow: 
      0 8px 32px rgba(245, 158, 11, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .glass-button-secondary:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 
      0 12px 40px rgba(245, 158, 11, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }

  /* Circular shimmer effect for current tracker icon */
  .circular-shimmer {
    position: relative;
    overflow: hidden;
  }

  .circular-shimmer::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
      transparent,
      rgba(59, 130, 246, 0.4),
      transparent 30%
    );
    animation: circular-shimmer-spin 3s linear infinite;
  }

  .dark .circular-shimmer::before {
    background: conic-gradient(
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent 30%
    );
  }

  @keyframes circular-shimmer-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  /* Beautiful colored slider tracks for fasting logs */

/* Base slider styling - using higher specificity */
input[type="range"].slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  cursor: pointer !important;
  height: 8px !important;
  outline: none !important;
  border: none !important;
}

/* Energy, Hunger, and Meal Quality: Red to Orange to Green gradient */
input[type="range"].energy-slider::-webkit-slider-track,
input[type="range"].hunger-slider::-webkit-slider-track,
input[type="range"].meal-quality-slider::-webkit-slider-track {
  background: linear-gradient(to right, 
    #dc2626 0%,     /* Red (1) */
    #ea580c 25%,    /* Orange (2-3) */
    #eab308 50%,    /* Yellow (4-5) */
    #65a30d 75%,    /* Light Green (6-7) */
    #16a34a 100%    /* Green (8-9) */
  ) !important;
  height: 8px !important;
  border-radius: 4px !important;
  border: none !important;
}

input[type="range"].energy-slider::-moz-range-track,
input[type="range"].hunger-slider::-moz-range-track,
input[type="range"].meal-quality-slider::-moz-range-track {
  background: linear-gradient(to right, 
    #dc2626 0%,     /* Red (1) */
    #ea580c 25%,    /* Orange (2-3) */
    #eab308 50%,    /* Yellow (4-5) */
    #65a30d 75%,    /* Light Green (6-7) */
    #16a34a 100%    /* Green (8-9) */
  ) !important;
  height: 8px !important;
  border-radius: 4px !important;
  border: none !important;
}

/* Hydration: White to Blue gradient */
input[type="range"].hydration-slider::-webkit-slider-track {
  background: linear-gradient(to right, 
    #f8fafc 0%,     /* Very light gray/white (1) */
    #cbd5e1 25%,    /* Light gray (2) */
    #60a5fa 50%,    /* Light blue (3) */
    #3b82f6 75%,    /* Blue (4) */
    #1d4ed8 100%    /* Dark blue (5) */
  ) !important;
  height: 8px !important;
  border-radius: 4px !important;
  border: none !important;
}

input[type="range"].hydration-slider::-moz-range-track {
  background: linear-gradient(to right, 
    #f8fafc 0%,     /* Very light gray/white (1) */
    #cbd5e1 25%,    /* Light gray (2) */
    #60a5fa 50%,    /* Light blue (3) */
    #3b82f6 75%,    /* Blue (4) */
    #1d4ed8 100%    /* Dark blue (5) */
  ) !important;
  height: 8px !important;
  border-radius: 4px !important;
  border: none !important;
}

/* Generic slider track styling (fallback) */
input[type="range"].slider::-webkit-slider-track {
  height: 8px !important;
  border-radius: 4px !important;
  border: none !important;
  background: #d1d5db !important; /* More visible gray fallback */
}

input[type="range"].slider::-moz-range-track {
  height: 8px !important;
  border-radius: 4px !important;
  border: none !important;
  background: #d1d5db !important; /* More visible gray fallback */
}

/* Basic visible colors for different slider types */
input[type="range"].energy-slider {
  background: linear-gradient(to right, #f87171, #fbbf24, #34d399) !important;
}

input[type="range"].hunger-slider {
  background: linear-gradient(to right, #ef4444, #f59e0b, #10b981) !important;
}

input[type="range"].meal-quality-slider {
  background: linear-gradient(to right, #dc2626, #f59e0b, #059669) !important;
}

input[type="range"].hydration-slider {
  background: linear-gradient(to right, #e5e7eb, #60a5fa, #1d4ed8) !important;
}

/* Enhanced slider thumbs */
input[type="range"].slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 24px !important;
  width: 24px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  cursor: pointer !important;
  border: 3px solid #3b82f6 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease-in-out !important;
  margin-top: -8px !important; /* Center the thumb */
}

input.slider::-webkit-slider-thumb:hover {
  border-color: #1d4ed8 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transform: scale(1.1) !important;
}

input.slider::-moz-range-thumb {
  height: 24px !important;
  width: 24px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  cursor: pointer !important;
  border: 3px solid #3b82f6 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease-in-out !important;
}

input.slider::-moz-range-thumb:hover {
  border-color: #1d4ed8 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transform: scale(1.1) !important;
}

/* Focus states */
input.slider:focus {
  outline: none !important;
}

input.slider:focus::-webkit-slider-thumb {
  border-color: #1d4ed8 !important;
  box-shadow: 0 0 0 2px #bfdbfe !important;
}

input.slider:focus::-moz-range-thumb {
  border-color: #1d4ed8 !important;
  box-shadow: 0 0 0 2px #bfdbfe !important;
}

/* Dark mode adjustments */
.dark input.slider::-webkit-slider-thumb,
.dark input.slider::-moz-range-thumb {
  background: #374151 !important;
  border-color: #60a5fa !important;
}

.dark input.slider::-webkit-slider-thumb:hover,
.dark input.slider::-moz-range-thumb:hover {
  border-color: #93c5fd !important;
}

.dark input.slider:focus::-webkit-slider-thumb,
.dark input.slider:focus::-moz-range-thumb {
  border-color: #93c5fd !important;
  box-shadow: 0 0 0 2px #1e40af !important;
}
}

@layer utilities {
  .animate-fadeIn {
    animation: fadeIn 0.3s ease-in-out;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Loading skeleton animations */
  .animate-pulse-fast {
    animation: pulse-fast 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  @keyframes pulse-fast {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }

  /* Smooth transitions for form states */
  .form-transition {
    transition: all 0.3s ease-in-out;
  }

  /* Button loading state */
  .button-loading {
    position: relative;
    color: transparent !important;
  }

  .button-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: button-spin 1s linear infinite;
  }

  @keyframes button-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* Custom scrollbar styles for treatment adherence section */
  .treatment-adherence-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgb(156 163 175) transparent;
  }

  .treatment-adherence-scroll::-webkit-scrollbar {
    width: 6px;
  }

  .treatment-adherence-scroll::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800 rounded-lg;
  }

  .treatment-adherence-scroll::-webkit-scrollbar-thumb {
    @apply bg-gray-400 dark:bg-gray-600 rounded-lg;
  }

  .treatment-adherence-scroll::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500 dark:bg-gray-500;
  }

  .dark .treatment-adherence-scroll {
    scrollbar-color: rgb(75 85 99) transparent;
  }
}