/* Reset default slider styles */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

/* Custom Thumb */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 28px;
  width: 28px;
  border-radius: 50%;
  background: #2dd4bf; /* brand-400 */
  cursor: grab;
  margin-top: -10px; /* (TrackHeight - ThumbHeight) / 2 */
  box-shadow: 0 0 15px rgba(45, 212, 191, 0.6), inset 0 0 0 4px #fff;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s;
  border: 1px solid rgba(0,0,0,0.1);
}

input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(45, 212, 191, 0.8), inset 0 0 0 4px #fff;
}

input[type=range]::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.15);
  box-shadow: 0 0 25px rgba(45, 212, 191, 1), inset 0 0 0 3px #fff;
}

input[type=range]::-moz-range-thumb {
  height: 28px;
  width: 28px;
  border-radius: 50%;
  background: #2dd4bf;
  cursor: grab;
  box-shadow: 0 0 15px rgba(45, 212, 191, 0.6), inset 0 0 0 4px #fff;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s;
  border: 1px solid rgba(0,0,0,0.1);
}

input[type=range]::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(45, 212, 191, 0.8), inset 0 0 0 4px #fff;
}

input[type=range]::-moz-range-thumb:active {
  cursor: grabbing;
  transform: scale(1.15);
  box-shadow: 0 0 25px rgba(45, 212, 191, 1), inset 0 0 0 3px #fff;
}

/* Custom Track */
.time-slider-track {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  position: relative;
  /* 
     Track colors based on 24 hours:
     Sleep (10 PM - 7 AM): #1e1b4b (dark purple)
     Awake (7 AM - 9 AM, 5 PM - 10 PM): #fef08a (yellow)
     Work (9 AM - 5 PM): #86efac (green)
     
     Percentages:
     0h - 7h (0% to 29.16%)
     7h - 9h (29.16% to 37.5%)
     9h - 17h (37.5% to 70.83%)
     17h - 22h (70.83% to 91.66%)
     22h - 24h (91.66% to 100%)
  */
  background: linear-gradient(to right, 
    #1e1b4b 0%, #1e1b4b 29.16%, 
    #fef08a 29.16%, #fef08a 37.5%, 
    #86efac 37.5%, #86efac 70.83%, 
    #fef08a 70.83%, #fef08a 91.66%, 
    #1e1b4b 91.66%, #1e1b4b 100%);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.05);
}

/* Base track that sits under the thumb */
.slider-wrapper::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: inherit;
  z-index: 0;
  pointer-events: none;
}

.slider-wrapper {
  position: relative;
  height: 28px; /* Matches thumb height for easy centering */
  display: flex;
  align-items: center;
}

.slider-wrapper input[type=range] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  z-index: 10;
}

/* Subtle entrance animations */
@keyframes slideDownAndFadeIn {
  from { 
    opacity: 0; 
    transform: translateY(-15px) scale(0.98); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

.city-card {
  animation: slideDownAndFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom Scrollbar for the Select Dropdown (Webkit only) */
select::-webkit-scrollbar {
  width: 8px;
}
select::-webkit-scrollbar-track {
  background: #111827; /* gray-900 */
}
select::-webkit-scrollbar-thumb {
  background: #374151; /* gray-700 */
  border-radius: 4px;
}
select::-webkit-scrollbar-thumb:hover {
  background: #4b5563; /* gray-600 */
}

/* Focus rings on custom interactive elements */
.focus-ring {
  outline: none;
  box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px #2dd4bf;
}

/* Light Mode Overrides */
body.light-mode {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}
body.light-mode .bg-gray-800\/60,
body.light-mode .bg-gray-800\/80,
body.light-mode .bg-gray-900\/80,
body.light-mode .bg-gray-950\/80,
body.light-mode .bg-gray-800\/50,
body.light-mode .bg-gray-800\/30 {
  background-color: rgba(255, 255, 255, 0.8) !important;
}
body.light-mode .bg-gray-700\/80 { background-color: rgba(229, 231, 235, 0.8) !important; }
body.light-mode .bg-gray-900\/50 { background-color: rgba(229, 231, 235, 0.8) !important; }
body.light-mode .border-gray-700\/50,
body.light-mode .border-gray-800\/60,
body.light-mode .border-gray-800\/50 { border-color: rgba(209, 213, 219, 0.6) !important; }
body.light-mode .border-gray-600 { border-color: #d1d5db !important; }
body.light-mode .text-gray-400 { color: #4b5563 !important; }
body.light-mode .text-gray-100 { color: #111827 !important; }
body.light-mode .text-white { color: #000000 !important; }
body.light-mode .text-gray-500 { color: #6b7280 !important; }
body.light-mode .text-gray-300 { color: #374151 !important; }
body.light-mode .text-gray-200 { color: #1f2937 !important; }
body.light-mode select { color: #111827 !important; }