/* Modern Slider Styling - Site-wide Beautiful Sliders */
/* Based on web_tester.py approach with enhanced visual design */

/* Base Range Input Styling */
input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    height: 16px !important;
    min-height: 16px !important;
    padding: 0 !important;
    outline: none !important;
    background: #e5e7eb !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    width: 100% !important;
    border: none !important;
}

input[type="range"]::-webkit-slider-track {
    height: 16px !important;
    background: #e5e7eb !important;
    border-radius: 8px !important;
    border: none !important;
}

/* Beautiful Default Thumb with Gradient and Animations */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    height: 24px !important;
    width: 24px !important;
    background: linear-gradient(145deg, #3b82f6, #2563eb) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    border: 2px solid #ffffff !important;
    position: relative !important;
    box-shadow: -1000px 0 0 1000px #3b82f6, 0 4px 12px rgba(59, 130, 246, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    touch-action: manipulation !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2) !important;
    background: linear-gradient(145deg, #2563eb, #1d4ed8) !important;
    border-width: 3px !important;
    box-shadow: -1000px 0 0 1000px #2563eb, 0 8px 25px rgba(59, 130, 246, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.1) !important;
    box-shadow: -1000px 0 0 1000px #1d4ed8, 0 4px 12px rgba(59, 130, 246, 0.8), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Firefox Range Input Styling */
input[type="range"]::-moz-range-track {
    height: 16px !important;
    background: #e5e7eb !important;
    border-radius: 8px !important;
    border: none !important;
}

input[type="range"]::-moz-range-progress {
    height: 16px !important;
    background: #3b82f6 !important;
    border-radius: 8px !important;
    border: none !important;
}

input[type="range"]::-moz-range-thumb {
    height: 24px !important;
    width: 24px !important;
    background: linear-gradient(145deg, #3b82f6, #2563eb) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.2) !important;
    background: linear-gradient(145deg, #2563eb, #1d4ed8) !important;
    border-width: 3px !important;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

input[type="range"]::-moz-range-thumb:active {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.8), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Sensitivity Sliders - Green Theme */
.sensitivity-slider::-webkit-slider-thumb {
    background: linear-gradient(145deg, #10b981, #059669) !important;
    box-shadow: -1000px 0 0 1000px #10b981, 0 4px 12px rgba(16, 185, 129, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.sensitivity-slider::-webkit-slider-thumb:hover {
    background: linear-gradient(145deg, #059669, #047857) !important;
    box-shadow: -1000px 0 0 1000px #059669, 0 8px 25px rgba(16, 185, 129, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.sensitivity-slider::-webkit-slider-thumb:active {
    box-shadow: -1000px 0 0 1000px #047857, 0 4px 12px rgba(16, 185, 129, 0.8), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.sensitivity-slider::-moz-range-progress {
    background: #10b981 !important;
}

.sensitivity-slider::-moz-range-thumb {
    background: linear-gradient(145deg, #10b981, #059669) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.sensitivity-slider::-moz-range-thumb:hover {
    background: linear-gradient(145deg, #059669, #047857) !important;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.sensitivity-slider::-moz-range-thumb:active {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.8), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Confidence Sliders - Orange Theme */
.confidence-slider::-webkit-slider-thumb {
    background: linear-gradient(145deg, #f59e0b, #d97706) !important;
    box-shadow: -1000px 0 0 1000px #f59e0b, 0 4px 12px rgba(245, 158, 11, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.confidence-slider::-webkit-slider-thumb:hover {
    background: linear-gradient(145deg, #d97706, #b45309) !important;
    box-shadow: -1000px 0 0 1000px #d97706, 0 8px 25px rgba(245, 158, 11, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.confidence-slider::-webkit-slider-thumb:active {
    box-shadow: -1000px 0 0 1000px #b45309, 0 4px 12px rgba(245, 158, 11, 0.8), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.confidence-slider::-moz-range-progress {
    background: #f59e0b !important;
}

.confidence-slider::-moz-range-thumb {
    background: linear-gradient(145deg, #f59e0b, #d97706) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.confidence-slider::-moz-range-thumb:hover {
    background: linear-gradient(145deg, #d97706, #b45309) !important;
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.confidence-slider::-moz-range-thumb:active {
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.8), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Time Sliders - Purple Theme */
.time-slider::-webkit-slider-thumb {
    background: linear-gradient(145deg, #8b5cf6, #7c3aed) !important;
    box-shadow: -1000px 0 0 1000px #8b5cf6, 0 4px 12px rgba(139, 92, 246, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.time-slider::-webkit-slider-thumb:hover {
    background: linear-gradient(145deg, #7c3aed, #6d28d9) !important;
    box-shadow: -1000px 0 0 1000px #7c3aed, 0 8px 25px rgba(139, 92, 246, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.time-slider::-webkit-slider-thumb:active {
    box-shadow: -1000px 0 0 1000px #6d28d9, 0 4px 12px rgba(139, 92, 246, 0.8), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.time-slider::-moz-range-progress {
    background: #8b5cf6 !important;
}

.time-slider::-moz-range-thumb {
    background: linear-gradient(145deg, #8b5cf6, #7c3aed) !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.time-slider::-moz-range-thumb:hover {
    background: linear-gradient(145deg, #7c3aed, #6d28d9) !important;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.time-slider::-moz-range-thumb:active {
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.8), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Additional Theme Classes for Future Use */

/* Success/Green Theme */
.success-slider::-webkit-slider-thumb {
    background: linear-gradient(145deg, #10b981, #059669) !important;
    box-shadow: -1000px 0 0 1000px #10b981, 0 4px 12px rgba(16, 185, 129, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.success-slider::-webkit-slider-thumb:hover {
    background: linear-gradient(145deg, #059669, #047857) !important;
    box-shadow: -1000px 0 0 1000px #059669, 0 8px 25px rgba(16, 185, 129, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.success-slider::-moz-range-progress {
    background: #10b981 !important;
}

.success-slider::-moz-range-thumb {
    background: linear-gradient(145deg, #10b981, #059669) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Warning/Yellow Theme */
.warning-slider::-webkit-slider-thumb {
    background: linear-gradient(145deg, #fbbf24, #f59e0b) !important;
    box-shadow: -1000px 0 0 1000px #fbbf24, 0 4px 12px rgba(251, 191, 36, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.warning-slider::-webkit-slider-thumb:hover {
    background: linear-gradient(145deg, #f59e0b, #d97706) !important;
    box-shadow: -1000px 0 0 1000px #f59e0b, 0 8px 25px rgba(251, 191, 36, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.warning-slider::-moz-range-progress {
    background: #fbbf24 !important;
}

.warning-slider::-moz-range-thumb {
    background: linear-gradient(145deg, #fbbf24, #f59e0b) !important;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Danger/Red Theme */
.danger-slider::-webkit-slider-thumb {
    background: linear-gradient(145deg, #ef4444, #dc2626) !important;
    box-shadow: -1000px 0 0 1000px #ef4444, 0 4px 12px rgba(239, 68, 68, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.danger-slider::-webkit-slider-thumb:hover {
    background: linear-gradient(145deg, #dc2626, #b91c1c) !important;
    box-shadow: -1000px 0 0 1000px #dc2626, 0 8px 25px rgba(239, 68, 68, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.danger-slider::-moz-range-progress {
    background: #ef4444 !important;
}

.danger-slider::-moz-range-thumb {
    background: linear-gradient(145deg, #ef4444, #dc2626) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Utility Classes */

/* Large slider variant */
.slider-lg input[type="range"] {
    height: 20px !important;
    min-height: 20px !important;
}

.slider-lg input[type="range"]::-webkit-slider-thumb {
    height: 28px !important;
    width: 28px !important;
}

.slider-lg input[type="range"]::-moz-range-thumb {
    height: 28px !important;
    width: 28px !important;
}

/* Small slider variant */
.slider-sm input[type="range"] {
    height: 12px !important;
    min-height: 12px !important;
}

.slider-sm input[type="range"]::-webkit-slider-thumb {
    height: 20px !important;
    width: 20px !important;
}

.slider-sm input[type="range"]::-moz-range-thumb {
    height: 20px !important;
    width: 20px !important;
}

/* Disabled state */
input[type="range"]:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

input[type="range"]:disabled::-webkit-slider-thumb {
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: -1000px 0 0 1000px #9ca3af, 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    background: linear-gradient(145deg, #d1d5db, #9ca3af) !important;
}

input[type="range"]:disabled::-moz-range-thumb {
    cursor: not-allowed !important;
    background: linear-gradient(145deg, #d1d5db, #9ca3af) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

input[type="range"]:disabled::-moz-range-progress {
    background: #9ca3af !important;
}