/* Test Calculator Styles - Optimized & Clean */

/* Smooth transitions */
* {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Material row animations */
.material-row {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Range slider styling */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4f46e5;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-top: -6px; /* Center the thumb vertically on the track */
}

.dark input[type="range"]::-webkit-slider-thumb {
    border-color: #1f2937;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4f46e5;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* Firefox centers thumb automatically */
}

.dark input[type="range"]::-moz-range-thumb {
    border-color: #1f2937;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #4f46e5 0%, #4f46e5 var(--value, 33.33%), #e5e7eb var(--value, 33.33%), #e5e7eb 100%);
    height: 8px;
    border-radius: 5px;
}

.dark input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #4f46e5 0%, #4f46e5 var(--value, 33.33%), #374151 var(--value, 33.33%), #374151 100%);
}

/* Specific styling for profit margin slider */
#profitMarginSlider::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #4f46e5 0%, #4f46e5 var(--value, 33.33%), #e5e7eb var(--value, 33.33%), #e5e7eb 100%);
}

.dark #profitMarginSlider::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #4f46e5 0%, #4f46e5 var(--value, 33.33%), #374151 var(--value, 33.33%), #374151 100%);
}

input[type="range"]::-moz-range-track {
    background: #e5e7eb;
    height: 8px;
    border-radius: 5px;
}

.dark input[type="range"]::-moz-range-track {
    background: #374151;
}

/* Firefox progress bar - needs JavaScript to update */
input[type="range"]::-moz-range-progress {
    background: #4f46e5;
    height: 8px;
    border-radius: 5px;
}

.dark input[type="range"]::-moz-range-progress {
    background: #4f46e5;
}

/* Update slider value dynamically */
#profitMarginSlider {
    --value: 44.44%; /* Default: (200-50)/(500-50) * 100 = 33.33% */
}

/* Button hover effects */
button:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

button:not(:disabled):active {
    transform: translateY(0);
}

/* Input focus effects */
input:focus,
select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Results card animation */
#resultsCard {
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile-friendly touch targets (exclude the toggle button) */
@media (max-width: 640px) {
  button:not(#toggleBg), a, input, select {
    min-height: 44px;
  }
}

/* Advanced Mode Toggle Styles */
#toggleKnob {
  top: 50% !important;
  left: 0.25rem;
  transform: translateY(-50%);
}
#toggleKnob.active {
  transform: translate(24px, -50%);
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .material-row .flex {
        flex-direction: column;
    }
    
    .material-row .flex > div {
        width: 100%;
    }
}

/* Print styles */
@media print {
    body {
        background: white;
    }
    
    #resultsCard {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}