/* ============================================
   Mixer Panel Styles
   ============================================ */

#mixer-panel {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 0 8px 8px 0;
    background: 
        url('../imgs/bg_mixer.png') repeat,
        linear-gradient(180deg, #2a2a4a 0%, #1a1a3a 100%);
}

/* Expanded State */
#mixer-panel[data-state="expanded"] {
    width: 500px;
    max-width: 90vw;
    padding: 0;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

#mixer-panel[data-state="expanded"] .panel-content {
    display: block;
}

#mixer-panel[data-state="expanded"] .docked-mutes {
    display: none;
}

#mixer-panel[data-state="expanded"] .panel-titlebar {
    cursor: grab;
}

/* Docked State */
#mixer-panel[data-state="docked"] {
    width: 50px;
    padding: 0;
}

#mixer-panel[data-state="docked"] .panel-content {
    display: none;
}

#mixer-panel[data-state="docked"] .docked-mutes {
    display: flex;
    flex-direction: column;
    padding: var(--gap-sm);
    gap: var(--gap-xs);
}

#mixer-panel[data-state="docked"] .panel-titlebar {
    cursor: default;
}

/* Tiled State */
#mixer-panel[data-state="tiled"] {
    top: 0;
    left: calc(33.33vw);
    transform: none;
    width: calc(33.33vw - 4px);
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    padding: 0;
    overflow-y: auto;
}

#mixer-panel[data-state="tiled"] .panel-content {
    display: block;
}

#mixer-panel[data-state="tiled"] .docked-mutes {
    display: none;
}

#mixer-panel[data-state="tiled"] .panel-titlebar {
    cursor: default;
}

/* Hidden State */
#mixer-panel[data-state="hidden"] {
    transform: translateX(-100%) translateY(-50%);
    opacity: 0;
    pointer-events: none;
}

/* ============================================
   Mixer Channels Grid
   ============================================ */
.mixer-channels {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: var(--gap-md);
    background: linear-gradient(180deg, #0a0a1a 0%, #151525 100%);
    border: 2px inset var(--chrome-dark);
    margin: var(--gap-sm);
    border-radius: 4px;
}

.mixer-channel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xs);
    padding: var(--gap-sm) 2px;
    background: linear-gradient(180deg, #252535 0%, #1a1a2a 100%);
    border: 1px solid var(--chrome-darker);
    border-radius: 4px;
}

.channel-label {
    font-family: var(--font-display);
    font-size: 6px;
    color: var(--chrome-light);
    text-align: center;
    letter-spacing: 0.5px;
    text-shadow: 0 0 5px currentColor;
}

/* Channel-specific colors */
.mixer-channel[data-channel="lead"] .channel-label { color: var(--cyber-pink); }
.mixer-channel[data-channel="bass"] .channel-label { color: var(--cyber-blue); }
.mixer-channel[data-channel="pads"] .channel-label { color: var(--cyber-purple); }
.mixer-channel[data-channel="fm"] .channel-label { color: var(--cyber-green); }
.mixer-channel[data-channel="kick"] .channel-label { color: var(--cyber-orange); }
.mixer-channel[data-channel="snare"] .channel-label { color: var(--cyber-yellow); }
.mixer-channel[data-channel="hihat"] .channel-label { color: var(--cyber-cyan); }
.mixer-channel[data-channel="tom"] .channel-label { color: var(--cyber-red); }

/* Vertical Fader */
.channel-fader {
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    writing-mode: vertical-lr;
    direction: rtl;
    width: 20px;
    height: 100px;
    background: linear-gradient(180deg, #1a1a3a, #0a0a1a);
    border: 2px inset var(--chrome-dark);
    border-radius: 4px;
    cursor: ns-resize;
}

.channel-fader::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 12px;
    background: linear-gradient(180deg, 
        var(--chrome-light) 0%, 
        var(--chrome-mid) 40%, 
        var(--chrome-dark) 100%);
    border: 2px outset var(--chrome-mid);
    border-radius: 2px;
    cursor: grab;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.channel-fader::-webkit-slider-thumb:active {
    cursor: grabbing;
    border-style: inset;
}

/* Channel Mute/Solo Buttons */
.channel-mute,
.channel-solo {
    width: 32px;
    height: 28px;
    font-size: 14px;
    font-weight: bold;
    padding: 0;
}

/* ============================================
   Docked Mute Strip
   ============================================ */
.docked-mutes {
    display: none;
    background: linear-gradient(180deg, #1a1a3a 0%, #0a0a2a 100%);
    border-radius: 0 4px 4px 0;
}

.docked-mute {
    width: 36px;
    height: 36px;
    font-family: var(--font-display);
    font-size: 10px;
    border: 2px outset var(--chrome-mid);
    border-radius: 4px;
    background: linear-gradient(180deg, #3a3a4a 0%, #2a2a3a 100%);
    color: var(--chrome-light);
    cursor: pointer;
}

.docked-mute:hover {
    background: linear-gradient(180deg, #4a4a5a 0%, #3a3a4a 100%);
}

.docked-mute:active,
.docked-mute.active {
    border-style: inset;
    background: linear-gradient(180deg, #5a2a2a 0%, #4a1a1a 100%);
    color: var(--cyber-red);
    text-shadow: 0 0 5px var(--cyber-red);
}

/* ============================================
   Drum Panel Styles
   ============================================ */
#drum-panel {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 8px 0 0 8px;
    background: 
        url('../imgs/bg_drums.png') repeat,
        linear-gradient(180deg, #3a2a1a 0%, #2a1a0a 100%);
}

/* Expanded State */
#drum-panel[data-state="expanded"] {
    width: 580px;
    max-width: 90vw;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 0;
}

#drum-panel[data-state="expanded"] .panel-content {
    display: block;
}

#drum-panel[data-state="expanded"] .docked-groups {
    display: none;
}

#drum-panel[data-state="expanded"] .panel-titlebar {
    cursor: grab;
}

/* Docked State */
#drum-panel[data-state="docked"] {
    width: 80px;
    padding: 0;
}

#drum-panel[data-state="docked"] .panel-content {
    display: none;
}

#drum-panel[data-state="docked"] .docked-groups {
    display: flex;
    flex-direction: column;
    padding: var(--gap-sm);
    gap: var(--gap-xs);
}

#drum-panel[data-state="docked"] .panel-titlebar {
    cursor: default;
}

/* Tiled State */
#drum-panel[data-state="tiled"] {
    top: 0;
    right: 0;
    left: auto;
    transform: none;
    width: calc(33.33vw - 4px);
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    padding: 0;
    overflow-y: auto;
}

#drum-panel[data-state="tiled"] .panel-content {
    display: block;
}

#drum-panel[data-state="tiled"] .docked-groups {
    display: none;
}

#drum-panel[data-state="tiled"] .panel-titlebar {
    cursor: default;
}

/* Hidden State */
#drum-panel[data-state="hidden"] {
    transform: translateX(100%) translateY(-50%);
    opacity: 0;
    pointer-events: none;
}

/* Drum Panel Header */
#drum-panel .panel-titlebar {
    background: linear-gradient(90deg, 
        #804000 0%, 
        #ff8000 50%, 
        #804000 100%);
}

/* ============================================
   Global Drum Controls Panel
   ============================================ */
.drum-global-panel {
    margin: var(--gap-sm);
    padding: var(--gap-sm);
    background: linear-gradient(180deg, #2a2a3a 0%, #1a1a2a 100%);
    border: 2px groove var(--chrome-dark);
    border-radius: 6px;
}

.global-header {
    font-family: var(--font-display);
    font-size: 10px;
    color: var(--cyber-orange);
    text-shadow: 0 0 5px var(--cyber-orange);
    text-align: center;
    margin-bottom: var(--gap-sm);
    letter-spacing: 2px;
}

.global-controls-row {
    display: flex;
    gap: var(--gap-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--gap-sm);
}

.global-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.section-label {
    font-family: var(--font-display);
    font-size: 7px;
    color: var(--cyber-yellow);
    text-shadow: 0 0 3px var(--cyber-yellow);
    letter-spacing: 1px;
}

.global-presets,
.global-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-global-preset,
.btn-global-action {
    padding: 5px 8px;
    font-family: var(--font-ui);
    font-size: 10px;
    border: 2px outset var(--chrome-mid);
    border-radius: 3px;
    background: linear-gradient(180deg, #4a4a5a 0%, #2a2a3a 100%);
    color: var(--chrome-light);
    cursor: pointer;
}

.btn-global-preset:hover,
.btn-global-action:hover {
    background: linear-gradient(180deg, #5a5a6a 0%, #3a3a4a 100%);
}

.btn-global-preset:active,
.btn-global-preset.active,
.btn-global-action:active {
    border-style: inset;
}

.btn-global-preset.active {
    background: linear-gradient(180deg, #4a6a4a 0%, #2a4a2a 100%);
    color: var(--cyber-green);
    text-shadow: 0 0 5px var(--cyber-green);
}

.global-fx-sliders {
    display: flex;
    gap: var(--gap-sm);
}

.global-slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.global-slider label {
    font-family: var(--font-display);
    font-size: 6px;
    color: var(--cyber-cyan);
    text-shadow: 0 0 3px var(--cyber-cyan);
}

.global-slider input[type="range"] {
    width: 50px;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(90deg, #1a1a3a, #3a3a5a);
    border: 1px inset var(--chrome-dark);
    border-radius: 3px;
    cursor: pointer;
}

.global-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 14px;
    background: linear-gradient(180deg, var(--chrome-light), var(--chrome-dark));
    border: 1px outset var(--chrome-mid);
    border-radius: 2px;
    cursor: grab;
}

.density-sliders {
    display: flex;
    gap: var(--gap-xs);
}

.density-slider-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.density-slider-group label {
    font-family: var(--font-display);
    font-size: 6px;
    color: var(--cyber-pink);
    text-shadow: 0 0 3px var(--cyber-pink);
}

.density-slider {
    width: 40px;
    height: 5px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(90deg, #2a1a3a, #4a2a5a);
    border: 1px inset var(--chrome-dark);
    border-radius: 2px;
    cursor: pointer;
}

.density-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 12px;
    background: linear-gradient(180deg, var(--chrome-light), var(--chrome-dark));
    border: 1px outset var(--chrome-mid);
    border-radius: 2px;
    cursor: grab;
}

.quick-mutes-section {
    width: 100%;
}

.quick-mutes {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-quick-mute,
.btn-quick-solo {
    padding: 5px 8px;
    font-family: var(--font-ui);
    font-size: 10px;
    border: 2px outset var(--chrome-mid);
    border-radius: 3px;
    background: linear-gradient(180deg, #4a3a3a 0%, #2a1a1a 100%);
    color: var(--chrome-light);
    cursor: pointer;
}

.btn-quick-mute:hover,
.btn-quick-solo:hover {
    background: linear-gradient(180deg, #5a4a4a 0%, #3a2a2a 100%);
}

.btn-quick-mute.active {
    border-style: inset;
    background: linear-gradient(180deg, #6a2a2a 0%, #4a1a1a 100%);
    color: var(--cyber-red);
    text-shadow: 0 0 5px var(--cyber-red);
}

.btn-quick-solo.active {
    border-style: inset;
    background: linear-gradient(180deg, #6a6a2a 0%, #4a4a1a 100%);
    color: var(--cyber-yellow);
    text-shadow: 0 0 5px var(--cyber-yellow);
}

/* ============================================
   Drum Track Styles
   ============================================ */
.drum-track {
    margin: var(--gap-sm);
    padding: var(--gap-sm);
    background: linear-gradient(180deg, #2a2a3a 0%, #1a1a2a 100%);
    border: 2px groove var(--chrome-dark);
    border-radius: 6px;
}

.drum-track.dimmed {
    opacity: 0.4;
}

.drum-track-header {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin-bottom: var(--gap-xs);
}

.drum-label {
    font-family: var(--font-display);
    font-size: 10px;
    color: var(--cyber-orange);
    text-shadow: 0 0 5px var(--cyber-orange);
    letter-spacing: 1px;
    min-width: 50px;
}

.drum-track[data-drum="kick"] .drum-label { color: var(--cyber-orange); text-shadow: 0 0 5px var(--cyber-orange); }
.drum-track[data-drum="snare"] .drum-label { color: var(--cyber-yellow); text-shadow: 0 0 5px var(--cyber-yellow); }
.drum-track[data-drum="hihat"] .drum-label { color: var(--cyber-cyan); text-shadow: 0 0 5px var(--cyber-cyan); }
.drum-track[data-drum="tom"] .drum-label { color: var(--cyber-red); text-shadow: 0 0 5px var(--cyber-red); }

.drum-mute,
.drum-solo {
    width: 28px;
    height: 24px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: bold;
    border: 2px outset var(--chrome-mid);
    border-radius: 3px;
    background: linear-gradient(180deg, #4a4a5a 0%, #2a2a3a 100%);
    color: var(--chrome-light);
    cursor: pointer;
    padding: 0;
}

.drum-mute:hover,
.drum-solo:hover {
    background: linear-gradient(180deg, #5a5a6a 0%, #3a3a4a 100%);
}

.drum-mute.active {
    border-style: inset;
    background: linear-gradient(180deg, #6a2a2a 0%, #4a1a1a 100%);
    color: var(--cyber-red);
    text-shadow: 0 0 5px var(--cyber-red);
}

.drum-solo.active {
    border-style: inset;
    background: linear-gradient(180deg, #6a6a2a 0%, #4a4a1a 100%);
    color: var(--cyber-yellow);
    text-shadow: 0 0 5px var(--cyber-yellow);
}

/* Drum Controls Row */
.drum-controls-row {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin-bottom: var(--gap-xs);
    flex-wrap: wrap;
}

.drum-preset-buttons,
.drum-action-buttons {
    display: flex;
    gap: 3px;
}

.btn-preset {
    width: 28px;
    height: 24px;
    font-family: var(--font-ui);
    font-size: 10px;
    border: 2px outset var(--chrome-mid);
    border-radius: 3px;
    background: linear-gradient(180deg, #5a4a3a 0%, #3a2a1a 100%);
    color: var(--chrome-light);
    cursor: pointer;
    padding: 0;
}

.btn-preset:hover {
    background: linear-gradient(180deg, #6a5a4a 0%, #4a3a2a 100%);
}

.btn-preset.active {
    border-style: inset;
    background: linear-gradient(180deg, #6a4a2a 0%, #4a3a1a 100%);
    color: var(--cyber-orange);
    text-shadow: 0 0 5px var(--cyber-orange);
}

.btn-mutate,
.btn-shift,
.btn-invert,
.btn-clear {
    width: 32px;
    height: 24px;
    font-family: var(--font-ui);
    font-size: 9px;
    border: 2px outset var(--chrome-mid);
    border-radius: 3px;
    background: linear-gradient(180deg, #4a4a5a 0%, #2a2a3a 100%);
    color: var(--chrome-light);
    cursor: pointer;
    padding: 0;
}

.btn-mutate:hover,
.btn-shift:hover,
.btn-invert:hover,
.btn-clear:hover {
    background: linear-gradient(180deg, #5a5a6a 0%, #3a3a4a 100%);
}

.btn-mutate:active,
.btn-shift:active,
.btn-invert:active,
.btn-clear:active {
    border-style: inset;
}

/* Drum FX Panel */
.drum-fx-panel {
    display: flex;
    gap: var(--gap-sm);
    margin-left: auto;
}

.drum-fx-slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.drum-fx-slider label {
    font-family: var(--font-display);
    font-size: 6px;
    color: var(--cyber-cyan);
    text-shadow: 0 0 3px var(--cyber-cyan);
}

.drum-fx-slider input[type="range"] {
    width: 40px;
    height: 5px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(90deg, #1a1a3a, #3a3a5a);
    border: 1px inset var(--chrome-dark);
    border-radius: 2px;
    cursor: pointer;
}

.drum-fx-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 12px;
    background: linear-gradient(180deg, var(--chrome-light), var(--chrome-dark));
    border: 1px outset var(--chrome-mid);
    border-radius: 2px;
    cursor: grab;
}

/* ============================================
   Drum Grid (16 steps)
   ============================================ */
.drum-grid {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 2px;
    background: linear-gradient(180deg, #0a0a1a 0%, #151520 100%);
    border: 2px inset var(--chrome-dark);
    border-radius: 4px;
    padding: 4px;
    margin-bottom: var(--gap-xs);
}

.drum-step {
    aspect-ratio: 1;
    min-width: 18px;
    min-height: 18px;
    border: 2px outset var(--chrome-dark);
    border-radius: 3px;
    background: linear-gradient(180deg, #252530 0%, #1a1a25 100%);
    cursor: pointer;
    transition: all 0.1s ease;
}

.drum-step:hover {
    background: linear-gradient(180deg, #353540 0%, #2a2a35 100%);
    border-color: var(--chrome-mid);
}

.drum-step:active {
    border-style: inset;
}

.drum-step.active {
    background: linear-gradient(180deg, #5a4a3a 0%, #4a3a2a 100%);
    border-color: var(--cyber-orange);
    box-shadow: 
        inset 0 0 8px rgba(255,128,0,0.3),
        0 0 4px rgba(255,128,0,0.3);
}

/* Drum-specific active colors */
.drum-track[data-drum="kick"] .drum-step.active {
    border-color: var(--cyber-orange);
    box-shadow: inset 0 0 8px rgba(255,100,0,0.4), 0 0 4px rgba(255,100,0,0.3);
}

.drum-track[data-drum="snare"] .drum-step.active {
    border-color: var(--cyber-yellow);
    box-shadow: inset 0 0 8px rgba(255,255,0,0.4), 0 0 4px rgba(255,255,0,0.3);
}

.drum-track[data-drum="hihat"] .drum-step.active {
    border-color: var(--cyber-cyan);
    box-shadow: inset 0 0 8px rgba(0,255,255,0.4), 0 0 4px rgba(0,255,255,0.3);
}

.drum-track[data-drum="tom"] .drum-step.active {
    border-color: var(--cyber-red);
    box-shadow: inset 0 0 8px rgba(255,50,50,0.4), 0 0 4px rgba(255,50,50,0.3);
}

.drum-step.playhead {
    box-shadow: 
        inset 0 0 10px rgba(255,255,255,0.2),
        0 0 6px rgba(255,255,255,0.2);
}

.drum-step.active.playhead {
    box-shadow: 
        inset 0 0 15px rgba(255,255,255,0.3),
        0 0 10px rgba(255,255,255,0.4);
}

.drum-step.triggered {
    animation: drumFlash 0.08s ease-out;
}

@keyframes drumFlash {
    0% { 
        filter: brightness(2.5);
        box-shadow: 0 0 15px rgba(255,255,255,0.9);
    }
    100% { 
        filter: brightness(1);
    }
}

/* Drum Volume Slider */
.drum-volume {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(90deg, #1a1a2a, #3a3a4a);
    border: 1px inset var(--chrome-dark);
    border-radius: 3px;
    cursor: pointer;
}

.drum-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 16px;
    background: linear-gradient(180deg, var(--chrome-light), var(--chrome-dark));
    border: 1px outset var(--chrome-mid);
    border-radius: 2px;
    cursor: grab;
}

/* ============================================
   Docked Mute Groups
   ============================================ */
.docked-groups {
    display: none;
    background: linear-gradient(180deg, #2a1a0a 0%, #1a0a00 100%);
    border-radius: 4px 0 0 4px;
    padding: var(--gap-sm);
}

.mute-group {
    width: 64px;
    padding: 8px 4px;
    font-family: var(--font-display);
    font-size: 8px;
    border: 2px outset var(--chrome-mid);
    border-radius: 4px;
    background: linear-gradient(180deg, #4a3a2a 0%, #2a1a0a 100%);
    color: var(--chrome-light);
    cursor: pointer;
    text-align: center;
    letter-spacing: 0.5px;
}

.mute-group:hover {
    background: linear-gradient(180deg, #5a4a3a 0%, #3a2a1a 100%);
}

.mute-group.active {
    border-style: inset;
    background: linear-gradient(180deg, #6a4a2a 0%, #4a2a0a 100%);
    color: var(--cyber-orange);
    text-shadow: 0 0 5px var(--cyber-orange);
}