@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 {
  /* 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;
  }
}