/* RadialMenu/radial-menu.css */

/* Base styles for clickable/draggable radial components */
.radial-value-circle,
.radial-group-circle,
.rcb-item, /* Clickable item in a RadialCircleBar */
.rgc-action-item { /* Clickable action item in a RadialGroupCircle */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, backdrop-filter 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-image 0.2s ease-in-out; /* Smooth feedback, added border-image */
    box-sizing: border-box; /* Ensure padding and border are within the element's total width and height */
    position: relative; /* Ensure stacking context for pseudo-elements */
    z-index: 0; /* Base for stacking */
}

/* Icon specific styles to prevent interaction issues */
.rvc-icon, 
.rgc-icon, 
.rcb-item-icon,
.rgc-action-item span { /* Assuming simple action items also use a span for their icon */
    pointer-events: none !important; /* Crucial: Clicks/drags go to parent */
    user-select: none !important;   /* Crucial: Prevent text selection of icons */
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    display: inline-flex; /* Helps center content if the span itself is flexed by parent */
    align-items: center;
    justify-content: center;
}

/* Font Awesome specific adjustments if an <i> tag is used inside above spans/elements */
.rvc-icon i,
.rgc-icon i, 
.rcb-item-icon i,
.rgc-action-item span i { 
    display: inline-block; 
    line-height: 1;      
    vertical-align: middle; 
}

/* Visual feedback for RadialValueCircle drag elements */
.rvc-line-indicator, 
.rvc-drag-indicator {
    transition: opacity 0.2s ease-out, width 0.2s ease-out; /* For snap-back */
}

/* Styling for RadialCircleBar */
.radial-circle-bar {
    box-shadow: 0px 2px 8px rgba(0,0,0,0.3);
    z-index: 1000; /* Ensure it's on top of other page content */
    /* background-color and padding are set by JS, will be overridden in dark mode */
    display: flex; /* Helps manage items */
    border-radius: 30px; /* Match container if it's a standalone bar */
}

body.dark-mode .radial-circle-bar {
    background-color: transparent !important; /* Override JS-set background for dark mode */
    box-shadow: none; /* Shadow is on the main container */
}

/* Styling for RadialGroupCircle sub-items container */
.rgc-subitems-container {
    /* Styles mostly set by JS for positioning and animation */
}

/* Glass effect for radial buttons in light mode (GENERAL - e.g., Top Menu) */
.rcb-item,
.rgc-action-item {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3));
    background-color: rgba(255, 255, 255, 0.25); /* Base for blur */
    backdrop-filter: blur(var(--glass-blur, 10px));
    -webkit-backdrop-filter: blur(var(--glass-blur, 10px));
    border: 1px solid white;
    color: #333;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-image: none; /* Reset border-image */
}

/* Hover styles for light mode (GENERAL - e.g., Top Menu) */
.rcb-item:hover,
.rgc-action-item:hover {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4));
    border: 1px solid transparent !important; /* Use !important if necessary, but prefer specificity */
    border-image: none !important; /* Remove old border-image if any */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.rcb-item:hover::before,
.rgc-action-item:hover::before {
    content: "";
    position: absolute;
    top: -1px; 
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 50%; 
    background: linear-gradient(to right, red, blue);
    z-index: -1; 
    pointer-events: none;
}

/* Specific hover for rgc-action-item to maintain its unique transform in light mode */
.rgc-action-item:hover {
    transform: translate(-50%, -50%) scale(1.1) !important; /* Keep this for positioning */
    /* The ::before pseudo-element will be inherited from .rgc-action-item:hover::before */
}

/* Active/Selected state for radial buttons in light mode */
.rcb-item[data-selected="true"],
.rgc-action-item[data-selected="true"] {
    background-image: linear-gradient(135deg, var(--primary-color-light), var(--primary-color));
    border: 1px solid var(--primary-color);
    border-image: none; /* Ensure no gradient border when selected */
    box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.3);
    color: white;
}

/* Styling for Radial Items (rcb-item) and Action Items (rgc-action-item) in Dark Mode (GENERAL - e.g., Top Menu) */
body.dark-mode .rcb-item,
body.dark-mode .rgc-action-item {
    background-image: linear-gradient(135deg, var(--white200, rgba(255,255,255,0.25)), var(--white50, rgba(255,255,255,0.05)));
    background-color: rgba(30, 30, 30, 0.25); /* Darker base for blur in dark mode */
    backdrop-filter: blur(var(--glass-blur, 10px));
    -webkit-backdrop-filter: blur(var(--glass-blur, 10px));
    border: 1px solid white;
    color: var(--white, #f0f0f0);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    border-image: none; /* Reset border-image */
    position: relative; /* Ensure stacking context for pseudo-elements */
    z-index: 0; /* Base for stacking */
}

body.dark-mode .rcb-item-icon,
body.dark-mode .rgc-action-item span {
    color: var(--white, #f0f0f0) !important;
}

/* Hover effects for glass buttons in Dark Mode (GENERAL - e.g., Top Menu) */
body.dark-mode .rcb-item:hover,
body.dark-mode .rgc-action-item:hover {
    background-image: linear-gradient(135deg, var(--white100, rgba(255,255,255,0.15)), var(--white200, rgba(255,255,255,0.25)));
    border: 1px solid transparent !important; /* Use !important if necessary */
    border-image: none !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .rcb-item:hover::before,
body.dark-mode .rgc-action-item:hover::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 50%;
    background: linear-gradient(to right, red, blue);
    z-index: -1;
    pointer-events: none;
}

/* Specific hover for rgc-action-item to maintain its unique transform in Dark Mode */
body.dark-mode .rgc-action-item:hover {
    transform: translate(-50%, -50%) scale(1.1) !important; /* Keep this for positioning */
    /* The ::before pseudo-element will be inherited */
}

/* Active/Selected state for radial buttons in Dark Mode */
body.dark-mode .rcb-item[data-selected="true"],
body.dark-mode .rgc-action-item[data-selected="true"] {
    background-image: linear-gradient(135deg, var(--primary-color), var(--primary-color-light));
    border: 1px solid var(--primary-color);
    border-image: none; /* Ensure no gradient border when selected */
    box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.5);
}

/* Ensure tooltips on radial elements are styled if native title attribute is not sufficient */
[title] {
    /* Basic tooltip styling can be enhanced if needed via custom tooltip JS/CSS */
}

/* New styles for side value display */
.rvc-value-display-side {
    position: absolute;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    z-index: 505; 
    line-height: 1.4; 
}

/* Glass style for value display in light mode */
.rvc-value-display-side {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65));
    background-color: rgba(255, 255, 255, 0.3); 
    color: #333;
    border: 1px solid rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(var(--glass-blur, 8px));
    -webkit-backdrop-filter: blur(var(--glass-blur, 8px));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 6px 10px;
}

body.dark-mode .rvc-value-display-side {
    background-image: linear-gradient(135deg, var(--white200, rgba(255,255,255,0.2)), var(--white50, rgba(255,255,255,0.05)));
    background-color: rgba(30, 30, 30, 0.25); 
    color: var(--white, #f0f0f0);
    border: 1px solid var(--white100, rgba(255,255,255,0.1)); /* Corrected syntax */
    backdrop-filter: blur(var(--glass-blur, 8px)); 
    -webkit-backdrop-filter: blur(var(--glass-blur, 8px));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.rvc-value-label {
    font-weight: bold;
    margin-right: 4px;
}

.rvc-value-text {
    /* font-family: monospace; */
}

/* Dark mode for labels and text within the value display */
body.dark-mode .rvc-value-label,
body.dark-mode .rvc-value-text {
    color: var(--white);
}

/* Primed state for action items */
.rgc-action-item.primed-for-action {
    background-image: linear-gradient(135deg, var(--primary-color), var(--primary-color-light)) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.5) !important;
    transform: translate(-50%, -50%) scale(1.1) !important;
}

/* CSS Variables for blue tones were moved to style.css :root */

/* === Quick Menu Specific Styles === */

/* Glass effect for QUICK MENU radial buttons in light mode */
#rgc-QuickControls .radial-value-circle {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3)) !important;
    background-color: rgba(255, 255, 255, 0.25) !important; /* Base for blur, needs !important due to inline styles */
    backdrop-filter: blur(var(--glass-blur, 10px)) !important; /* !important might be needed if other filters conflict */
    -webkit-backdrop-filter: blur(var(--glass-blur, 10px)) !important;
    border: 1px solid white !important; /* !important to override inline styles if any */
    color: #333 !important; /* Ensure text/icon is visible */
    border-image: none !important; /* Reset border-image */
    /* border-radius: 50%; */ /* Usually set by JS or a more general .radial-value-circle rule */
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */ /* Optional */
}

/* Hover styles for QUICK MENU radial buttons in light mode */
#rgc-QuickControls .radial-value-circle:hover {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4)) !important;
    border: 1px solid transparent !important; /* Keep space for border, but make it transparent */
    border-image: none !important; /* Remove border-image */
    position: relative; /* Needed for z-stacking of pseudo-element if not already absolute/relative */
    z-index: 0; /* Ensure button content is above the pseudo-element default z-index */
    /* transform: translateY(-2px); */ /* Optional */
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */ /* Optional */
}

#rgc-QuickControls .radial-value-circle:hover::before {
    content: "";
    position: absolute;
    top: -1px; /* Create 1px border */
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 50%; /* Make it circular */
    background: linear-gradient(to right, red, blue) !important; /* The gradient border */
    z-index: -1; /* Place it behind the button's content */
    pointer-events: none; /* Ensure it doesn't interfere with clicks */
}

/* Active/Selected state for QUICK MENU radial buttons in light mode */
#rgc-QuickControls .radial-value-circle[data-selected="true"],
#rgc-QuickControls .radial-value-circle.primed-for-action { /* Assuming .primed-for-action might be added to RVCs too */
    background-image: linear-gradient(135deg, var(--primary-color-light), var(--primary-color)) !important;
    border: 1px solid var(--primary-color) !important;
    border-image: none !important; /* Ensure no gradient border when selected/primed */
    /* box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.3); */ /* Optional */
    color: white !important; /* Ensure text/icon is visible */
}

/* Styling for QUICK MENU Radial Items in Dark Mode */
body.dark-mode #rgc-QuickControls .radial-value-circle {
    background-image: linear-gradient(135deg, var(--white200, rgba(255,255,255,0.25)), var(--white50, rgba(255,255,255,0.05))) !important;
    background-color: rgba(30, 30, 30, 0.25) !important; /* Darker base for blur, needs !important */
    backdrop-filter: blur(var(--glass-blur, 10px)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur, 10px)) !important;
    border: 1px solid white !important;
    color: var(--white, #f0f0f0) !important;
    border-image: none !important; /* Reset border-image */
}

/* Icons in QUICK MENU Dark Mode */
body.dark-mode #rgc-QuickControls .radial-value-circle .rvc-icon { /* RVC icon */
    color: var(--white, #f0f0f0) !important;
}

/* Hover effects for QUICK MENU glass buttons in Dark Mode */
body.dark-mode #rgc-QuickControls .radial-value-circle:hover {
    background-image: linear-gradient(135deg, var(--white100, rgba(255,255,255,0.15)), var(--white200, rgba(255,255,255,0.25))) !important;
    border: 1px solid transparent !important; /* Keep space for border, but make it transparent */
    border-image: none !important; /* Remove border-image */
    position: relative; /* Needed for z-stacking of pseudo-element */
    z-index: 0; /* Ensure button content is above the pseudo-element default z-index */
}

body.dark-mode #rgc-QuickControls .radial-value-circle:hover::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 50%;
    background: linear-gradient(to right, red, blue) !important;
    z-index: -1;
    pointer-events: none;
}

/* Active/Selected state for QUICK MENU radial buttons in Dark Mode */
body.dark-mode #rgc-QuickControls .radial-value-circle[data-selected="true"],
body.dark-mode #rgc-QuickControls .radial-value-circle.primed-for-action {
    background-image: linear-gradient(135deg, var(--primary-color), var(--primary-color-light)) !important;
    border: 1px solid var(--primary-color) !important;
    border-image: none !important;
}

/* Persistent gradient border for QUICK MENU radial buttons when being dragged */
#rgc-QuickControls .radial-value-circle.rvc-is-dragging {
    /* Ensure the base button maintains its transparent border for layout */
    border: 1px solid transparent !important;
    border-image: none !important;
    /* The background (glass effect) should already be applied from the base #rgc-QuickControls .radial-value-circle rule */
    /* No need to repeat background-image here unless it needs to change during drag */
}

#rgc-QuickControls .radial-value-circle.rvc-is-dragging::before {
    content: "";
    position: absolute;
    top: -1px; 
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 50%; 
    background: linear-gradient(to right, red, blue) !important; /* The gradient border */
    z-index: -1; 
    pointer-events: none; 
}

/* Styling for QUICK MENU Radial Items in Dark Mode */
body.dark-mode #rgc-QuickControls .radial-value-circle {
    background-image: linear-gradient(135deg, var(--white200, rgba(255,255,255,0.25)), var(--white50, rgba(255,255,255,0.05))) !important;
    background-color: rgba(30, 30, 30, 0.25) !important; /* Darker base for blur, needs !important */
    backdrop-filter: blur(var(--glass-blur, 10px)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur, 10px)) !important;
    border: 1px solid white !important;
    color: var(--white, #f0f0f0) !important;
    border-image: none !important; /* Reset border-image */
}

/* Persistent gradient border for QUICK MENU radial buttons when being dragged in Dark Mode */
body.dark-mode #rgc-QuickControls .radial-value-circle.rvc-is-dragging {
    border: 1px solid transparent !important;
    border-image: none !important;
}

body.dark-mode #rgc-QuickControls .radial-value-circle.rvc-is-dragging::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 50%;
    background: linear-gradient(to right, red, blue) !important; /* The gradient border */
    z-index: -1;
    pointer-events: none;
}

/* CSS Variables for blue tones were moved to style.css :root */