/* ═══════════════════════════════════════════════════════════════
   sliders.css — Unified slider visual identity
   noUiSlider (mapping panel) + native <input type="range">
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS tokens ────────────────────────────────────────────────── */

:root {
    --sl-track-bg:     #dce6f0;
    --sl-connect-bg:   #4a8fa8;
    --sl-handle-bg:    #ffffff;
    --sl-handle-ring:  rgba(74, 143, 168, 0.35);
    --sl-handle-size:  16px;
    --sl-track-h:      4px;
    --sl-radius:       3px;
    --sl-tooltip-bg:   #1a3a5c;
    --sl-tooltip-fg:   #e8f0f8;
}

:root[data-theme="dark"],
:root:not([data-theme="light"]) @media (prefers-color-scheme: dark) {
    --sl-track-bg:     #2a3a4e;
    --sl-connect-bg:   #5aa3be;
    --sl-handle-bg:    #d0dcea;
    --sl-handle-ring:  rgba(90, 163, 190, 0.40);
    --sl-tooltip-bg:   #0d1929;
    --sl-tooltip-fg:   #c8daea;
}

[data-theme="dark"] {
    --sl-track-bg:     #2a3a4e;
    --sl-connect-bg:   #5aa3be;
    --sl-handle-bg:    #d0dcea;
    --sl-handle-ring:  rgba(90, 163, 190, 0.40);
    --sl-tooltip-bg:   #0d1929;
    --sl-tooltip-fg:   #c8daea;
}

/* ═══════════════════════════════════════════════════════════════
   1. noUiSlider — override the CDN default theme
   ═══════════════════════════════════════════════════════════════ */

/* Track — keep the default 18px height from CDN so handle math works.
   The visible 4px strip is created via .noUi-connects, not the target itself. */
.noUi-target {
    background: none;
    border: none;
    box-shadow: none;
    /* height stays at 18px from CDN .noUi-horizontal */
}

/* The connects container IS the visible track */
.noUi-connects {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: var(--sl-track-h) !important;
    border-radius: var(--sl-radius);
    background: var(--sl-track-bg);
}

/* Filled portion (connect) */
.noUi-connect {
    background: var(--sl-connect-bg);
    border-radius: var(--sl-radius);
}

/* Handle — center a 16px circle in the 18px target:
   top = (18 - 16) / 2 = 1px                          */
.noUi-horizontal .noUi-handle {
    width:  var(--sl-handle-size);
    height: var(--sl-handle-size);
    border-radius: 50%;
    background: var(--sl-handle-bg);
    border: none;
    box-shadow:
        0 1px 5px rgba(0, 0, 0, 0.18),
        0 0 0 1.5px var(--sl-handle-ring);
    top:   1px;
    right: calc(var(--sl-handle-size) / -2);
    cursor: pointer;
    transition: box-shadow 0.12s;
}

.noUi-horizontal .noUi-handle:hover,
.noUi-active.noUi-handle {
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.22),
        0 0 0 2.5px var(--sl-connect-bg);
}

/* Remove the two default vertical grip lines */
.noUi-handle::before,
.noUi-handle::after {
    display: none;
}

/* Tooltip */
.noUi-tooltip {
    display: none;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
    background: var(--sl-tooltip-bg);
    color: var(--sl-tooltip-fg);
    border: none;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    white-space: nowrap;
    bottom: calc(100% + 8px);
}

.noUi-active .noUi-tooltip {
    display: block;
}

/* Disabled */
.noUi-target[disabled] .noUi-connect {
    background: #b0c4d4;
}

.noUi-target[disabled] .noUi-handle {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
    cursor: not-allowed;
    opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════
   2. Native <input type="range"> — app-wide base
   Mixer fader/pan have their own dark theme in mixer.css.
   Color picker slider keeps its rainbow background.
   ═══════════════════════════════════════════════════════════════ */

/* Element height = handle size so the thumb has full room.
   Background is transparent — the visual track comes from the pseudo-elements. */
input[type="range"]:not(.mix-ch__fader):not(.mix-ch__pan):not(.color-slider) {
    -webkit-appearance: none;
    appearance: none;
    height: var(--sl-handle-size);
    background: transparent;
    outline: none;
    cursor: pointer;
    border: none;
    vertical-align: middle;
}

input[type="range"]:not(.mix-ch__fader):not(.mix-ch__pan):not(.color-slider)::-webkit-slider-runnable-track {
    height: var(--sl-track-h);
    border-radius: var(--sl-radius);
    background: var(--sl-track-bg);
}

input[type="range"]:not(.mix-ch__fader):not(.mix-ch__pan):not(.color-slider)::-moz-range-track {
    height: var(--sl-track-h);
    border-radius: var(--sl-radius);
    background: var(--sl-track-bg);
    border: none;
}

input[type="range"]:not(.mix-ch__fader):not(.mix-ch__pan):not(.color-slider)::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width:  var(--sl-handle-size);
    height: var(--sl-handle-size);
    border-radius: 50%;
    background: var(--sl-handle-bg);
    border: none;
    box-shadow:
        0 1px 5px rgba(0, 0, 0, 0.18),
        0 0 0 1.5px var(--sl-handle-ring);
    cursor: pointer;
    transition: box-shadow 0.12s;
    /* center the 16px thumb on the 4px track */
    margin-top: calc((var(--sl-track-h) - var(--sl-handle-size)) / 2);
}

input[type="range"]:not(.mix-ch__fader):not(.mix-ch__pan):not(.color-slider)::-webkit-slider-thumb:hover {
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.22),
        0 0 0 2.5px var(--sl-connect-bg);
}

input[type="range"]:not(.mix-ch__fader):not(.mix-ch__pan):not(.color-slider)::-moz-range-thumb {
    width:  var(--sl-handle-size);
    height: var(--sl-handle-size);
    border-radius: 50%;
    background: var(--sl-handle-bg);
    border: none;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   3. Layout helpers (unchanged)
   ═══════════════════════════════════════════════════════════════ */

.range-slider-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20%;
}

.range-slider {
    width: 100%;
    height: 16px; /* headroom for the handle */
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    width: 200px;
    margin-top: 5px;
    font-size: 12px;
}

.disabled-slider {
    opacity: 0.5;
    pointer-events: none;
}