/* ==========================================
   Auto-Centering Module Styles
   Controls for parent auto-positioning feature
   ========================================== */

.auto-center-toggle-container {
    display: flex;
    align-items: center;
    padding: 8px 0;
    gap: 8px;
}

.auto-center-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    color: #333;
    transition: color 0.2s ease;
}

.auto-center-toggle-label:hover {
    color: #007bff;
}

.auto-center-toggle-text {
    font-weight: 500;
}

.auto-center-toggle-icon {
    font-size: 16px;
}

/* Checkbox styling */
#autoCenterParentsToggle {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #007bff;
}

/* No animation for parent centering - instant movement for better performance */
.component-group {
    transition: none;
}

/* Visual indicator when auto-centering is active */
.component-group.auto-centered {
    /* Optional: Add subtle glow or indicator */
}