@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme {
  --color-blue-500: #1a63cc;
  --color-blue-600: #0146AC;
  --color-blue-700: #003685;
}

@variant dark (&:where(.dark, .dark *));

@layer base {
  html {
    scroll-behavior: smooth;
  }
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 20px;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #334155;
}

/* ─── Custom Range Slider ──────────────────────────────────── */
.range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  outline: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

/* Track */
.range-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 9999px;
  background: #e2e8f0;
}
.dark .range-slider::-webkit-slider-runnable-track {
  background: #1e293b;
}
.range-slider::-moz-range-track {
  height: 6px;
  border-radius: 9999px;
  background: #e2e8f0;
}
.dark .range-slider::-moz-range-track {
  background: #1e293b;
}

/* Thumb — Blue (default) */
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0146AC;
  border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(1, 70, 172, 0.4);
  margin-top: -7px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.range-slider::-webkit-slider-thumb:hover,
.range-slider:focus::-webkit-slider-thumb {
  transform: scale(1.15);
  box-shadow: 0 2px 10px rgba(1, 70, 172, 0.5);
}
.range-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0146AC;
  border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(1, 70, 172, 0.4);
  cursor: pointer;
  transition: transform 0.15s;
}

/* Thumb — Orange (overage state) */
.range-slider.overage::-webkit-slider-thumb {
  background: #f97316;
  box-shadow: 0 1px 6px rgba(249, 115, 22, 0.4);
}
.range-slider.overage::-webkit-slider-thumb:hover,
.range-slider.overage:focus::-webkit-slider-thumb {
  box-shadow: 0 2px 10px rgba(249, 115, 22, 0.5);
}
.range-slider.overage::-moz-range-thumb {
  background: #f97316;
  box-shadow: 0 1px 6px rgba(249, 115, 22, 0.4);
}

/* Filled progress track (blue) */
.range-slider::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    #0146AC var(--range-pct, 0%),
    #e2e8f0 var(--range-pct, 0%)
  );
}
.dark .range-slider::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    #0146AC var(--range-pct, 0%),
    #1e293b var(--range-pct, 0%)
  );
}
.range-slider.overage::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    #f97316 var(--range-pct, 0%),
    #e2e8f0 var(--range-pct, 0%)
  );
}
.dark .range-slider.overage::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    #f97316 var(--range-pct, 0%),
    #1e293b var(--range-pct, 0%)
  );
}

/* Firefox filled track */
.range-slider::-moz-range-progress {
  height: 6px;
  border-radius: 9999px;
  background: #0146AC;
}
.range-slider.overage::-moz-range-progress {
  background: #f97316;
}