/* Custom minimal styling to support active item highlight with default Bootstrap colors */

.stream-row.active {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

.stream-row.active .text-muted,
.stream-row.active .small {
    color: rgba(255, 255, 255, 0.8) !important;
}

.stream-row.active .btn-outline-primary {
    border-color: #ffffff !important;
    color: #ffffff !important;
}

.stream-row.active .btn-outline-primary:hover {
    background-color: #ffffff !important;
    color: var(--bs-primary) !important;
}

.stream-row.active .badge {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* Collapsible volume slider styling */
.volume-container {
    transition: all 0.2s ease;
}

.volume-slider-wrapper {
    width: 0;
    min-width: 0; /* CRITICAL: override default flex-item min-width: auto */
    opacity: 0;
    overflow: hidden;
    transition: width 0.25s ease-out, opacity 0.25s ease-out;
    display: inline-block;
    vertical-align: middle;
}

.volume-container:hover .volume-slider-wrapper,
.volume-container:focus-within .volume-slider-wrapper,
.volume-slider-wrapper.active {
    width: 100px;
    opacity: 1;
}

#volume-slider {
    width: 100px;
    min-width: 0; /* Ensure the slider itself doesn't force a minimum layout size */
    vertical-align: middle;
}

/* Dither Canvas positioning behind header texts */
.dither-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Soft dark-grey background tinting for headers */
.card-header-res, .card-header-rewind {
    background-color: #2a2b30 !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}