/* Control Panel Dashboard & Base Styles */

/* Dashboard Container */
.control-dashboard {
    position: fixed;
    bottom: 20px; /* Adjust spacing from bottom */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    background-color: rgba(20, 20, 20, 0.85); /* Dark background with transparency */
    padding: 8px 15px;
    border-radius: 50px; /* Pill shape */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 1050; /* Ensure it's above most content */
    backdrop-filter: blur(5px); /* Frosted glass effect */
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

/* Individual Icons */
.control-dashboard .dashboard-icon {
    cursor: pointer;
    padding: 5px;
    border-radius: 50%; /* Circular hover effect */
    transition: background-color 0.2s ease;
}

.control-dashboard .dashboard-icon img {
    display: block;
    width: 28px; /* Adjust icon size */
    height: 28px;
    filter: brightness(0) invert(1); /* Pure white icon */
}

.control-dashboard .dashboard-icon:hover,
.control-dashboard .dashboard-icon.active { /* Style active toggle */
    background-color: rgba(255, 255, 255, 0.15);
}

/* Control Panel Base Styles (Shared) */
.control-panel,
.persistent-controls,
.record-controls {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(15, 15, 15, 0.95); /* Slightly darker panel background */
    color: #e0e0e0; /* Light text color */
    padding: 25px 40px; /* Generous padding */
    box-sizing: border-box;
    z-index: 1040; /* Below dashboard */
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* Initial State (Hidden) */
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.3s ease, 
                visibility 0s linear 0.4s; /* Delay visibility change */
}

/* Active State (Visible) */
.control-panel.panel-visible,
.persistent-controls.panel-visible,
.record-controls.panel-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.3s ease, 
                visibility 0s linear 0s;
}

/* Panel Content Layout */
.control-panel,
.persistent-controls,
.record-controls {
    display: grid;
    gap: 30px; /* Gap between columns */
    align-items: start; /* Align content to the top of each column */
    max-height: 70vh; /* Limit panel height - might conflict with visible overflow */
    overflow-y: visible; /* Change from auto */
    overflow-x: visible; /* Change from hidden */
    max-width: 100vw; /* Add max width */
}

.control-panel { /* Now 4 columns */
    grid-template-columns: repeat(4, 1fr);
}

.persistent-controls,
.record-controls { /* Specific to 4-column panel */
    grid-template-columns: repeat(4, 1fr);
}

/* Individual Column */
.control-column {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between rows/sections within a column */
    min-width: 0; /* Helps prevent overflow in grid/flex layouts */
}

/* Section & Subsection Labels */
.control-label--section {
    font-size: 1.1em;
    font-weight: 600;
    color: #ffffff;
    margin-top: 15px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.control-column > .control-label--section:first-child {
    margin-top: 0; /* Remove top margin for the first section in a column */
}

.control-label--subsection {
    font-size: 0.95em;
    font-weight: 500;
    color: #cccccc;
    margin-top: 10px;
    margin-bottom: 5px;
    font-style: italic;
}

/* Control Row Layout */
.control-row {
    display: grid;
    grid-template-columns: auto 1fr auto; /* Label | Slider/Input | Value */
    gap: 10px;
    align-items: center;
    margin-bottom: 0; /* Remove bottom margin */
    min-height: 28px; /* Ensure consistent row height */
}

/* Specific Row Types */
.control-row.orientation-controls .radio-group {
    grid-column: 2 / 4; /* Span radio buttons across slider and value columns */
}
.control-row .checkbox-label {
    grid-column: 2 / 4; /* Span checkbox label across slider and value columns */
    justify-self: start;
}
.control-row input[type="color"] {
     grid-column: 2 / 4; /* Span color picker */
     justify-self: start;
     width: 50px; /* Adjust size */
     height: 25px;
     padding: 1px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     background: transparent;
     cursor: pointer;
}

/* Row Label */
.control-label {
    font-size: 0.85em;
    color: #b0b0b0;
    white-space: nowrap;
}

/* Value Display */
.control-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
    color: #a0a0a0;
    min-width: 35px; /* Ensure space for value */
    text-align: right;
}

/* Sliders (input[type="range"]) */
input[type="range"].control-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px; /* Slider track height */
    background: rgba(255, 255, 255, 0.15); /* Track color */
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

input[type="range"].control-slider:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Slider Thumb (Chrome/Safari/Edge) */
input[type="range"].control-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; /* Thumb size */
    height: 16px;
    background: #cccccc; /* Thumb color */
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease;
}

input[type="range"].control-slider:active::-webkit-slider-thumb {
    background: #ffffff;
}

/* Slider Thumb (Firefox) */
input[type="range"].control-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #cccccc;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

input[type="range"].control-slider:active::-moz-range-thumb {
    background: #ffffff;
}

/* Checkboxes & Radio Buttons */
.radio-group {
    display: flex;
    gap: 15px;
}
.radio-label, 
.checkbox-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9em;
    color: #c0c0c0;
}

.radio-label input[type="radio"],
.checkbox-label input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: rgba(255, 255, 255, 0.1);
    margin-right: 8px;
    color: #ccc;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    display: grid;
    place-content: center;
    cursor: pointer;
}

.radio-label input[type="radio"] {
    border-radius: 50%;
}

.radio-label input[type="radio"]::before, 
.checkbox-label input[type="checkbox"]::before {
    content: "";
    width: 8px;
    height: 8px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    background-color: #eee;
    border-radius: 1px;
}

.radio-label input[type="radio"]::before {
     border-radius: 50%;
}

.radio-label input[type="radio"]:checked::before,
.checkbox-label input[type="checkbox"]:checked::before {
    transform: scale(1);
}

/* Buttons */
.control-button {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ccc;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s ease;
    margin-top: 10px;
    justify-self: start; /* Align button left */
}

.control-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.control-button--subtle {
     background-color: transparent;
     border: 1px solid transparent;
     padding-left: 0;
}
.control-button--subtle:hover {
     background-color: rgba(255, 255, 255, 0.1);
     border: 1px solid transparent;
}

/* Dividers */
.control-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 15px 0;
}

.control-divider--subtle {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 10px 0;
}




        /* Recording controls CSS from page_output.php */
        .recording-controls {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 100;
            display: flex;
            gap: 10px;
            align-items: center;
            background: rgba(0, 0, 0, 0.7);
            padding: 10px;
            border-radius: 5px;
            backdrop-filter: blur(5px);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }
        
        .recording-btn {
            background: #444;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 15px;
            font-family: sans-serif;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: background 0.2s;
        }
        
        .recording-btn:hover {
            background: #555;
        }
        
        .recording-btn.active {
            background: #f44336;
        }
        
        .record-icon {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #f44336;
            display: inline-block;
        }
        
        .recording-btn.active .record-icon {
            animation: pulse 1.5s ease infinite;
        }
        
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.4; }
            100% { opacity: 1; }
        }
        
        .timer {
            color: white;
            font-family: monospace;
            font-size: 14px;
        }
        
        .recording-options {
            position: absolute;
            bottom: 60px;
            right: 0;
            background: rgba(0, 0, 0, 0.8);
            padding: 15px;
            border-radius: 5px;
            width: 250px;
            display: none;
            flex-direction: column;
            gap: 10px;
        }
        
        .recording-options.visible {
            display: flex;
        }
        
        .option-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .option-group label {
            color: white;
            font-size: 12px;
            font-family: sans-serif;
        }
        
        .option-group select, 
        .option-group input {
            background: #333;
            color: white;
            border: 1px solid #555;
            border-radius: 3px;
            padding: 5px;
            font-size: 12px;
        }
        /* End Recording controls CSS */



/* Transparent Panel State */
.control-panel.panel-transparent,
.persistent-controls.panel-transparent {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-top: none; /* Optionally remove border too */
}

/* Ensure text/controls remain visible in transparent mode */
/* (This might need adjustments based on background content) */
.panel-transparent .control-label,
.panel-transparent .control-value,
.panel-transparent .control-label--section,
.panel-transparent .control-label--subsection,
.panel-transparent .checkbox-label,
.panel-transparent .radio-label {
    /* Example: Add a subtle text shadow for readability */
    /* text-shadow: 0 0 3px rgba(0, 0, 0, 0.7); */ 
}

/* Adjust slider/input backgrounds if needed for visibility */
.panel-transparent input[type="range"].control-slider {
    /* background: rgba(0, 0, 0, 0.3); Example */
}