/* Read-only / Spectator Mode Styles */

/* General disabled state for containers */
.read-only {
    pointer-events: none !important;
    opacity: 0.6;
    filter: grayscale(0.5);
    user-select: none;
}

/* Explicitly style disabled inputs to look disabled */
input[disabled],
select[disabled] {
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Specific overrides if needed */
.read-only input[type="range"],
.read-only input[type="color"],
.read-only select,
.read-only button,
.read-only input[type="checkbox"] {
    cursor: not-allowed;
}

/* Fix for custom range sliders not looking disabled */
input[type="range"]:disabled {
    opacity: 0.4 !important;
}

input[type="range"]:disabled::-webkit-slider-thumb {
    background: #888 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

input[type="range"]:disabled::-moz-range-thumb {
    background: #888 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* Allow scrolling even in read-only containers if necessary */
.read-only-container {
    overflow: auto;
    pointer-events: auto;
    /* Re-enable pointer events for container scrolling */
}

/* But disable the children */
.read-only-container>* {
    pointer-events: none;
}