/* Custom styles for the Physics Lab */

:root {
    --accent-cyan: #22d3ee;
    --accent-blue: #3b82f6;
    --bg-slate-900: #0f172a;
}

canvas {
    display: block;
}

#simulation-canvas, #wave-canvas {
    background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
}

#invert-gravity-toggle[data-active="true"] {
    background-color: var(--accent-cyan);
}

#invert-gravity-toggle[data-active="true"] #toggle-thumb {
    transform: translateX(1.25rem);
}

/* Custom range slider styling for better look in dark mode */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.4);
    cursor: pointer;
    margin-top: -4px;
}

input[type=range]::-moz-range-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #22d3ee;
    cursor: pointer;
    border: none;
}

/* Chart containers styling */
.chart-container {
    position: relative;
    height: 100%;
}

/* Smooth transitions */
.transition-all {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}