/* ==========================================================================
   Niffty DJ - Next-Gen Holographic Waveform Displays & Phase Matcher
   ========================================================================== */

.waveforms-container {
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;
    height: 100%;
}

/* Phase Match / Beat Grid Laser Meter */
.phase-match-meter {
    height: 10px;
    background: var(--bg-deep-void);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.85);
    flex-shrink: 0;
}

.phase-center-marker {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #ffffff, var(--neon-cyan));
    transform: translateX(-50%);
    z-index: 2;
    box-shadow: 0 0 8px var(--neon-cyan);
}

.phase-match-indicator {
    position: absolute;
    top: 1px;
    bottom: 1px;
    width: 14px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--neon-emerald), #00f2fe);
    transform: translateX(-50%);
    transition: left 0.03s linear;
    box-shadow: 0 0 10px var(--neon-emerald);
}

/* Parallel Scrolling Waveforms */
.parallel-waveforms-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-height: 0;
}

.deck-waveform-strip {
    display: flex;
    align-items: center;
    background: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
    flex: 1;
    min-height: 24px;
    border: 1px solid var(--border-subtle);
    position: relative;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.95);
    cursor: ew-resize;
}

.deck-waveform-strip:hover {
    border-color: var(--border-medium);
}

.deck-waveform-strip[data-deck="0"] {
    border-left: 4px solid var(--neon-cyan);
    box-shadow: inset 4px 0 16px rgba(0, 242, 254, 0.18);
}

.deck-waveform-strip[data-deck="1"] {
    border-left: 4px solid var(--neon-magenta);
    box-shadow: inset 4px 0 16px rgba(247, 37, 133, 0.18);
}

.deck-waveform-strip[data-deck="2"] {
    border-left: 4px solid #ffaa00;
    box-shadow: inset 4px 0 16px rgba(255, 170, 0, 0.18);
}

.deck-waveform-strip[data-deck="3"] {
    border-left: 4px solid #a855f7;
    box-shadow: inset 4px 0 16px rgba(168, 85, 247, 0.18);
}

/* 4-Decks Waveform Strips */
.deck-3-strip,
.deck-4-strip {
    display: none !important;
}

body.four-decks-active .deck-3-strip,
body.four-decks-active .deck-4-strip {
    display: flex !important;
}

/* Vertical Waveforms Layout ("VERT" Mode) */
body.vertical-waveforms-layout .parallel-waveforms-wrapper {
    flex-direction: row !important;
    height: 175px !important;
    min-height: 140px !important;
    gap: 4px !important;
}

body.vertical-waveforms-layout .deck-waveform-strip {
    height: 100% !important;
    min-height: 100% !important;
    cursor: ns-resize !important;
    border-left: 1px solid var(--border-subtle) !important;
    border-top: 4px solid var(--neon-cyan) !important;
    box-shadow: inset 0 4px 16px rgba(0, 242, 254, 0.18) !important;
}

body.vertical-waveforms-layout .deck-waveform-strip[data-deck="1"] {
    border-top: 4px solid var(--neon-magenta) !important;
    box-shadow: inset 0 4px 16px rgba(247, 37, 133, 0.18) !important;
}

body.vertical-waveforms-layout .deck-waveform-strip[data-deck="2"] {
    border-top: 4px solid #ffaa00 !important;
    box-shadow: inset 0 4px 16px rgba(255, 170, 0, 0.18) !important;
}

body.vertical-waveforms-layout .deck-waveform-strip[data-deck="3"] {
    border-top: 4px solid #a855f7 !important;
    box-shadow: inset 0 4px 16px rgba(168, 85, 247, 0.18) !important;
}

body.vertical-waveforms-layout .waveform-center-playhead {
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    bottom: auto !important;
    width: 100% !important;
    height: 2px !important;
    transform: translateY(-50%) !important;
}

.scrolling-waveform-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.waveform-center-playhead {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #ff0033;
    box-shadow: 0 0 8px rgba(255, 0, 51, 0.85);
    z-index: 3;
    pointer-events: none;
    transform: translateX(-50%);
}

/* Floating Waveform Zoom Controls */
.waveform-zoom-controls {
    position: absolute;
    right: 8px;
    top: 2px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-surface-glass);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 1px 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.wf-zoom-btn {
    background: transparent;
    border: none;
    color: var(--neon-cyan);
    font-size: 11px;
    font-weight: 900;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.15s ease;
}

.wf-zoom-btn:hover {
    background: rgba(0, 242, 254, 0.2);
    color: #fff;
}

.wf-zoom-label {
    font-size: 8px;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--text-muted);
    min-width: 24px;
    text-align: center;
}

.deck-waveform-strip[data-deck="1"] .waveform-center-playhead {
    box-shadow: 0 0 8px rgba(255, 0, 51, 0.85);
}